<!--
   ConstructQ — Checklist Template v7.0
   Date: 30 มิ.ย. 2569 (2026-06-30)
   Owner: วุธ (PM/SA)

   Changes from v6.0 · Auto-verdict foundation:
     1) Field `unit` (หน่วย) — enhanced with common presets (mm, cm, mils,
        ksc, °C, MPa, %, ΔE, kg, ppm, dB) as datalist suggestions
     2) NEW · Field `criteria` (JSON object) — เก็บเกณฑ์การยอมรับ
        Schema:
          {
            operator: 'range' | 'ge' | 'le' | 'eq' | 'in_list' | 'manual' | 'none',
            min: number,      // for range / ge
            max: number,      // for range / le
            expected: number, // for eq
            tolerance: number,// for eq (±)
            warnBelow: number,// soft warning (optional)
            warnAbove: number,// soft warning (optional)
            acceptable: [],   // for in_list (radio/checkbox/select)
            onFail: 'auto_ncr' | 'flag' | 'none',
            severity: 'minor' | 'major' | 'critical'
          }
     3) Visual UI ใน QuestionEditor:
        · แสดงเฉพาะ type=number/color/radio/checkbox/passfail
        · Dropdown operator (บังคับเลือกก่อน)
        · Inputs สำหรับ min/max/expected/tolerance/warn* ตาม operator
        · Dropdown onFail + severity
        · Preview verdict summary chip: "Range 2.5 - 3.5 mils · Auto NCR"
     4) Preview Simulator ในหน้ามือถือ (Mobile Preview):
        · แถวใหม่ใต้แต่ละ number/color/radio/passfail question
        · "🧪 ทดลองตอบ: [___]" · user พิมพ์ค่า
        · แสดง verdict chip ทันที: ✅ PASS · ⚠ WARN · ❌ FAIL
        · แสดงเหตุผล: "Below min: 1.8 < 2.5"
        · Real-time · state per question via useState
     5) Helper function `ckEvaluate(q, value)` → { verdict, reason }
        · Central logic ที่ใช้ทั้ง preview simulator และ backend production
     6) Data model backward compat:
        · Question ที่ไม่มี criteria → default operator='none' → skip
        · Question เดิมทั้งหมดยังโหลดได้ปกติ

   --- Original v6.0 changes ---
<!--
   ConstructQ — Checklist Template v6.0
   Date: 30 มิ.ย. 2569 (2026-06-30)
   Owner: วุธ (PM/SA)

   Changes from v5.0:
     1) ตัดกล่อง "🕒 อัปเดตล่าสุด" (ck-stat-meta) ออกจาก Dashboard stats
        · เดิม grid 5 คอลัมน์: 4 stats + meta (updated at/by)
        · ใหม่ grid 4 คอลัมน์เท่ากัน · balance สวยกว่า
        · Data fields updatedAt / updatedBy ยังอยู่ · ไม่ break data model
     2) ย้ายปุ่ม "ขยายทั้งหมด / ย่อทั้งหมด" ออกจาก toolbar บน
        (แถวเดียวกับปุ่มลบ/บันทึก) ไปไว้เป็นแถวใหม่ ใต้ปุ่มลบ · ชิดขวา
        · เดิม: อยู่บนสุด · แถวเดียวกับ Preview/Duplicate/Delete/Save
        · ใหม่: อยู่แถวใหม่ใต้ dashboard stats · ก่อน sections · ชิดขวา
        · ทำให้ Toolbar บนสะอาดขึ้น · ปุ่มขยาย/ย่อ อยู่ใกล้ sections ที่ควบคุม
     3) CSS ปรับ:
        · .ck-stats grid: repeat(4,1fr) 1.5fr → repeat(4,1fr)
        · ตัด .ck-stat-meta rules (dead code · เก็บไว้เผื่อ future)
        · เพิ่ม .ck-sec-toolbar rules · แถวใหม่กลาง

   --- Original v5.0 changes ---
<!--
   ConstructQ — Checklist Template v5.0
   Date: 30 มิ.ย. 2569 (2026-06-30)
   Owner: วุธ (PM/SA)

   Changes from v4.0:
     1) Delete button · confirm popup (existing · strengthened w/ kind support)
        · ConfirmDialog รับ prop `kind` = 'danger' | 'primary'
        · kind=danger: icon 🗑 · ปุ่มยืนยันสีแดง (เดิม)
        · kind=primary: icon 💾 · ปุ่มยืนยันสีเทียร์ล
     2) Save/Publish button · เพิ่ม confirm popup ก่อนบันทึก
        · เดิม กด "บันทึก" / "เผยแพร่" → save ทันที
        · ใหม่ → confirm popup ก่อน · "ยืนยันบันทึกข้อมูล"
        · i18n เพิ่ม: saveTitle · saveMsg · saveConfirm
     3) Expand All / Collapse All ของหมวดหมู่ (Sections)
        · เพิ่มปุ่ม 2 ตัว ที่ toolbar ของ editor · หลัง Preview
        · ลุก collapsed state จาก SectionEditor → CkEditor
        · State: collapsedIds (Set of section IDs)
        · Expand All: clear all IDs
        · Collapse All: add all section IDs
        · SectionEditor รับ collapsed + onToggleCollapsed props
        · i18n เพิ่ม: btnExpandAll · btnCollapseAll
     4) ไม่กระทบส่วนอื่น: sidebar · questions · preview · export/import

   --- Original v4.0 changes ---
<!--
   ConstructQ — Checklist Template v4.0
   Date: 30 มิ.ย. 2569 (2026-06-30)
   Owner: วุธ (PM/SA)

   Changes from v3.0:
     1) ตัดฟิลด์ Version และ Assigned Roles (บทบาท) ออกจาก editor:
        · Meta cell "📌 Version" ถูกลบ (input field + hint)
        · Meta cell "👥 บทบาทที่ใช้ได้" ถูกลบ (role pills)
        · Data model เดิม (version, assignedRoles ยังอยู่ใน CK_LISTS)
     2) จัดปุ่ม 4 ตัวไว้บรรทัดเดียวกับ title (ชิดขวา):
        · เดิม: header block · title/sub · row ปุ่ม (ด้านล่างแยก)
        · ใหม่: flex row · title+sub ซ้าย · ปุ่มขวา (align top)
        · Layout ใช้ .ck-page-head-flex ใหม่
        · ปุ่ม 4 ตัว: เทมเพลตเช็คลิสต์ · นำเข้า Excel · นำออก Excel · สร้างเช็คลิสต์ใหม่
     3) Mobile preview header · ลบ "v {version}" chip เพราะไม่มีฟิลด์ version แล้ว
     4) ไม่กระทบ:
        · Sidebar · Editor sections/questions · Preview mode
        · Save/Publish/Duplicate/Delete functionality

   --- Original v3.0 changes ---
<!--
   ConstructQ — Checklist Template v3.0
   Date: 30 มิ.ย. 2569 (2026-06-30)
   Owner: วุธ (PM/SA)

   Changes from v2.0 (Form Checklist):
     1) Title · "Form Checklist" → "เทมเพลท Checklist"
        · เปลี่ยนใน i18n TH: pageTitle + crumb + <title>
        · EN: "Checklist Template"
        · pageSub อัปเดตให้สอดคล้อง (ไม่พูดถึง "เชื่อมโครงการ" อีกต่อไป)
     2) Remove Project dropdown · component CkProjectPicker ไม่ render แล้ว
        · projectId state ยังคงไว้ · ใช้ตัวแรกจาก CK_PROJECTS โดย default
        · showAll: แสดง checklist ทั้งหมด (ไม่กรองตาม projectId)
     3) Remove WBS dropdown · ในหน้าแก้ไข checklist:
        · ตัด <select className="ck-meta-select"> ที่ผูก wbsCode ออก
        · meta cell "🔗 ผูกกับ WBS" ถูกลบ · UI สะอาดขึ้น
        · data model เดิม (wbsCode ยังอยู่ใน CK_LISTS · ไม่ break)
     4) Move + Rename ปุ่ม "สร้างเช็คลิสต์":
        · เดิมอยู่ใน CkSidebar ด้านล่างชื่อ "รายการเช็คลิสต์"
        · ย้ายไปแถว action-right · หลังปุ่ม "นำออก Excel"
        · Rename: "สร้างเช็คลิสต์" → "สร้างเช็คลิสต์ใหม่" / "New Checklist"
        · Sidebar เหลือแต่ list · ไม่มีปุ่มแล้ว
     5) "เช็คลิสต์ของโครงการ" → "รายการเช็คลิสต์"
        · sidebar.title · i18n TH + EN

   Backward compat: wbsCode ยังเก็บใน data model · เผื่อ future feature

-->
<!--
   ConstructQ — Checklist v8.0
   Date: 3 ก.ค. 2569 (2026-07-03)
   Owner: วุธ (PM/SA)

   Changes from v7.0 · Mobile Preview overhaul:
     1) Section navigation ⇒ Tab strip
        · หมวดแต่ละหมวดกลายเป็น Tab แถวบน (scroll horizontal)
        · Tab แสดง section number + name + question count
        · แตะ Tab เพื่อสลับหมวด (ไม่ scroll ผ่านทั้งหมด)
     2) Item navigation ⇒ Stepper (one-at-a-time)
        · ในแต่ละหมวดโชว์คำถามครั้งละ 1 ข้อ
        · Progress dots + N/Total บนสุด
        · ปุ่ม ‹ ก่อนหน้า · ถัดไป › ล่างสุด
        · ข้อสุดท้ายของ Tab สุดท้าย ปุ่มเปลี่ยนเป็น 'บันทึกการตรวจ'
     3) Type-aware answer widgets (ดีขึ้นจาก v7.0)
        · number  → input + unit chip ชัดเจน · numeric keyboard
        · color   → HEX input + live swatch preview
        · passfail → ปุ่มใหญ่เต็มความกว้าง 2 คอลัมน์
        · radio/checkbox → cards เต็มความกว้าง มี icon
        · photo   → กล้อง CTA + counter (min photos)
        · date    → native date picker
        · signature → canvas placeholder + Clear/Save
        · text/longtext → input ปกติ · longtext auto-grow
     4) Simulator (v7.0) และ Required comment/photo (v2.0) ยังทำงานปกติ
     5) i18n TH/EN ครบทั้งหมด · ปุ่ม/label สลับตาม lang
-->
<!--
   ConstructQ — Checklist v9.0
   Date: 3 ก.ค. 2569 (2026-07-03)
   Owner: วุธ (PM/SA)

   Changes from v8.0:
     1) 🐛 FIX: Data not showing (blank app) bug
        · Root cause: In v8.0 build script, the EN i18n injection duplicated
          keys and left stray text after the closing brace of preview:{ ... }
        · Broken line (v8.0 line 1298):
            photoReqLabel:"Attach photo…", photoChooseTh:"Take photo…",
            photoReqLabel:"Photo (at least 1)", photoChooseTh:"Take a photo…",
            required:"Required", prev:"Previous", … signClear:"Clear signature" },
            required:"Required", prev:"Previous", … signClear:"Clear signature" },
        · Effect: JavaScript parse error → CK_I18N never assigned →
          App tries to read T.something → throws → whole app blank
        · Fix: Rebuild the EN preview:{ … } line cleanly with de-duplicated
          keys and a single closing brace
     2) No behaviour or UI changes vs v8.0 · all Mobile Preview features
        (Tabs + Stepper + type-aware widgets) still intact
-->
<!--
   ConstructQ — Checklist v10.0
   Date: 3 ก.ค. 2569 (2026-07-03)
   Owner: วุธ (PM/SA)

   Changes from v9.0:
     1) CK_SEED question labels — rewritten as declarative RULE statements
        · ก่อน: "ค่าสีที่วัดได้"                → หลัง: "ค่าสีที่วัดได้ ΔE ≤ 2.0"
        · ก่อน: "สีที่ใช้ทา"                     → หลัง: "สีที่ใช้ทาตรงตาม Color Code ในแบบ"
        · ก่อน: "สีสม่ำเสมอ ไม่มีรอยลูกกลิ้งหรือไม่?" → หลัง: "สีสม่ำเสมอ ไม่มีรอยลูกกลิ้ง"
        · ก่อน: "รูปประกอบการตรวจ"           → หลัง: "แนบรูปประกอบการตรวจอย่างน้อย 2 รูป/ตำแหน่ง"
        · ก่อน: "ผู้ตรวจรับรอง"                → หลัง: "ผู้ตรวจลงลายเซ็นรับรองผลการตรวจ"
        · ก่อน: "ค่า Slump"                    → หลัง: "ค่า Slump อยู่ในช่วง 7.5–15 ซม."
        · ก่อน: "อุณหภูมิคอนกรีต"              → หลัง: "อุณหภูมิคอนกรีตขณะเทอยู่ในช่วง 10–32 °C"
        · ก่อน: "วันที่หล่อ"                    → หลัง: "บันทึกวันที่หล่อคอนกรีตครบถ้วน"
        · ก่อน: "หมายเลขแบบที่อ้างอิง"          → หลัง: "ระบุหมายเลขแบบ (Drawing) ที่ใช้อ้างอิงในการตรวจ"
        · ทำ EN คู่กันทุกข้อ · เพื่อให้อ่านเหมือน compliance rule
     2) No UI/JS changes vs v9.0 · แก้เฉพาะ text labels ใน CK_SEED
     3) CK_TEMPLATES (industry standard) มี label เป็น rule อยู่แล้ว
        · ไม่ต้องแก้ (มยผ./วสท./OSHA-TH/EIA templates เขียนเป็น rule ตั้งแต่ v8.0)
-->
<!--
   ConstructQ — Checklist v11.0
   Date: 3 ก.ค. 2569 (2026-07-03)
   Owner: วุธ (PM/SA)

   Changes from v10.0 · Mobile Preview polish:
     1) Stepper: bars → numbered CIRCLES + check-mark BADGE
        · เดิม (v8.0): thin bar 14×4 px · เขียวเมื่อ done · เทอร์ควอยส์ยาวเมื่อ on
        · ใหม่ (v11.0):
            - วงกลม 28 px มีเลขลำดับตรงกลาง
            - เชื่อมกันด้วยเส้นบางระหว่างวง
            - Default: วงเทา · ตัวเลขเทาเข้ม
            - On (ปัจจุบัน): วง teal filled · เลขสีขาว · ring shadow
            - Done (ผ่านแล้ว): วงเขียว filled · เลขสีขาว
              + badge วงกลม 14 px มุมขวาบน มี checkmark ขาว
     2) Rule display แทน Try-answer simulator
        · เดิม (v7.0): กล่อง "🧪 ทดลองตอบ" มี input ให้พิมพ์ค่าทดสอบ
                       · แสดง verdict pass/warn/fail live
                       · ผู้ตรวจงงว่าจะพิมพ์อะไร (ไม่ตรงกับการใช้งานจริง)
        · ใหม่ (v11.0): กล่อง "📏 เกณฑ์การตรวจ" แบบ static
                       · แสดงกฎ (rule) ที่ set ไว้กับข้อนั้น เช่น "x ≤ 2.0 ΔE"
                       · แสดง Auto-NCR trigger + severity ถ้ามี
                       · ไม่มี input · ผู้ตรวจอ่านกฎแล้วตอบใน widget หลัก
                       · ตัด simValue state, ckEvaluate call, verdict chip ออกจากกล่องนี้
                         (แต่ยัง export ให้ QuestionEditor แสดง preview อยู่)
     3) i18n เพิ่ม preview.ruleTitle + ruleAutoNcr + ruleSeverity (TH/EN)
-->
<!--
   ConstructQ — Checklist v12.0
   Date: 3 ก.ค. 2569 (2026-07-03)
   Owner: วุธ (PM/SA)

   Changes from v11.0 · Mobile Preview Stepper polish:
     1) เครื่องหมาย ✓ (check-mark) บน Stepper วงที่ผ่านแล้ว
        · เดิม (v11.0): badge วงกลม 14 px สีเขียวเข้ม มีขอบขาว
                      ครอบ ✓ ขาว อยู่มุมขวาบนของเลข
        · ใหม่ (v12.0): แค่ ✓ stroke สีเหลือง (#FBBF24) หนา 4 px
                      · ไม่มีวงกลมครอบ
                      · ขยายให้ใหญ่ขึ้น 18×18 px คาดทับตัวเลข
                      · drop-shadow บาง ๆ ให้อ่านออกทั้งบน state on/done
                      · translate ตรงกลางบน (top:50%, left:50%) เพื่อคาดกลาง
                        เลขให้อ่านง่ายว่าข้อนี้ผ่านแล้ว
     2) ไม่แตะส่วนอื่น · Tab · Stepper circle · Rule chip ยังเหมือน v11.0
-->
<!--
   ConstructQ — Checklist v13.0
   Date: 3 ก.ค. 2569 (2026-07-03)
   Owner: วุธ (PM/SA)

   Changes from v12.0 · Mobile Preview polish:
     1) Yellow ✓ badge ย้ายมามุมขวาบน · ตัวเลขไม่ถูกทับ
        · เดิม (v12.0): ✓ 22 px คาดตรงกลาง · ตัวเลขจาง opacity .35
        · ใหม่ (v13.0):
            - ✓ 16 px มุมขวาบน (top:-6px · right:-6px)
            - stroke สีเหลือง #FBBF24 · thickness 4 · drop-shadow
            - ตัวเลขคงเห็นเต็ม 100% opacity · ตรงกลาง
            - เห็นทั้ง ✓ (ผ่านแล้ว) และเลขลำดับพร้อมกัน
     2) ✓ ปรากฏเฉพาะข้อที่ตอบจริง (ไม่ใช่แค่กด "ถัดไป")
        · เดิม (v12.0): กด Next → ข้อก่อนหน้าถูก mark done ทันที (i < stepIdx)
                       · ทำให้ ✓ ขึ้นแม้ user ยังไม่ตอบ
        · ใหม่ (v13.0):
            - เพิ่ม state `answered` (Set) ใน PhoneRunner
            - ใช้ key = `${sIdx}:${qIdx}` เก็บว่าข้อไหนถูกตอบแล้ว
            - PhoneQuestion รับ onAnswer callback
            - ค่อนกลาง: ห่อ .ck-phone-current-q ด้วย onInput+onChange+onClick
              จับเหตุการณ์ที่ user มี interaction จริงกับ answer widget
              · Rule chip (📏 static) ถูก stopPropagation ไว้ · ไม่นับเป็น answer
              · Required comment/photo box ถูก stopPropagation เช่นกัน
            - Stepper dot state:
                current           → .on (teal, no ✓)
                answered & past   → .done (green, ✓ yellow)
                skipped & past    → .skipped (gray, no ✓, no green)
                future            → default (gray)
            - เส้นเชื่อมสีเขียวเฉพาะช่วงที่ทั้งสองข้าง done
-->
<!--
   ConstructQ — Checklist v14.0
   Date: 3 ก.ค. 2569 (2026-07-03)
   Owner: วุธ (PM/SA)

   Changes from v13.0 · Mobile Preview Stepper polish:
     1) ✓ badge อยู่ถาวรบนข้อที่ตอบแล้ว · แม้กด ย้อนกลับ / ไปข้อถัดไป
        · เดิม (v13.0): logic
            if (i === stepIdx) state = "on"       (ไม่มี ✓)
            else if (i < stepIdx) state = done/skipped ตาม answered
          ปัญหา: ถ้าผู้ตรวจตอบข้อ 1 · ไปข้อ 2 · แล้วกด ‹ ก่อนหน้า ย้อนมาข้อ 1
                 → ข้อ 1 กลายเป็น "on" อีกครั้ง · ✓ ที่เคยขึ้นหายไป
        · ใหม่ (v14.0): แยก "current-highlight" ออกจาก "answered-mark"
            state = { isCurrent, isAnswered }
            .on       (ปัจจุบัน)   → teal ring + border
            .done     (ตอบแล้ว)    → green fill + ✓ yellow badge (พินไว้)
            .skipped  (past + ยังไม่ตอบ) → เทา
            คลาสรวมได้: `on done` = ข้อปัจจุบันที่เคยตอบแล้ว
                        (green fill + ✓ + teal ring แสดง "อยู่ที่นี่")
     2) เส้นเชื่อม: เขียวเมื่อทั้ง 2 ข้าง answered (ไม่เกี่ยวกับตำแหน่ง current)
     3) ไม่แตะ CSS เดิมของ .on/.done · แค่ปรับ combinable + เพิ่ม ring border
        เมื่อ .on.done ซ้อนกัน
-->
<!--
   ConstructQ — Checklist v15.0
   Date: 3 ก.ค. 2569 (2026-07-03)
   Owner: วุธ (PM/SA)

   Changes from v14.0 · Sample data expansion:
     1) ck-002 "ตรวจงานคอนกรีต" ขยายจาก 1 หมวด/3 ข้อ → 5 หมวด/14 ข้อ
        A. ข้อมูลอ้างอิงและเตรียมงาน (text · date · longtext)
        B. ตรวจรับคอนกรีตจากโรงงาน   (text · number×2 · radio)
        C. งานเทและควบคุมคุณภาพ      (passfail · number · checkbox · photo)
        D. การบ่มและตรวจหลังถอดแบบ   (passfail · number)
        E. การตรวจรับ                (radio · signature)
     2) ck-003 "ตรวจระบบ MEP" ขยายจาก 1 หมวด/1 ข้อ → 6 หมวด/16 ข้อ
        A. ข้อมูลอ้างอิง             (text · date)
        B. ระบบไฟฟ้า (วสท. 3001-56)  (number×2 · radio · checkbox)
        C. ระบบประปา (วสท. 4001-59)  (number · passfail · date)
        D. ระบบปรับอากาศ (ASHRAE)    (number · passfail · color)
        E. ระบบดับเพลิง (NFPA 13)    (passfail · photo)
        F. การส่งมอบ                 (longtext · signature)
     3) ทุกข้อเขียนเป็น RULE statement · ไม่ใช่ prompt
        · หลาย ข้อมี criteria block พร้อม onFail/severity ให้ rule chip แสดง
     4) ครอบคลุมทั้ง 10 question types
        text · longtext · number · radio · checkbox · passfail
        · photo · date · signature · color
     5) UI · JS ไม่แตะเลย · เฉพาะ CK_SEED data
-->
<!--
   ConstructQ — Checklist v16.0
   Date: 3 ก.ค. 2569 (2026-07-03)
   Owner: วุธ (PM/SA)

   Changes from v15.0 · Mobile Preview Tab bar polish:
     1) แถบ Tab หมวดหมู่ · เมื่อล้นจอให้ scroll bar แสดงและใช้ได้
        · เดิม (v8.0): overflow-x:auto · แต่ซ่อน scrollbar
            scrollbar-width:none
            ::-webkit-scrollbar{display:none}
          ผู้ใช้ไม่รู้ว่า scroll ได้ + ไม่มี handle ให้กดลาก
        · ใหม่ (v16.0):
            - เอา scrollbar-width:none และ ::-webkit-scrollbar{display:none} ออก
            - กำหนด scrollbar สูง 6 px · thumb สี teal · track สีเทาอ่อน
            - เพิ่ม padding-bottom เล็กน้อยกันเลข tab ทับกับ scrollbar
            - เพิ่ม overscroll-behavior:contain กัน scroll bounce ไปทั้งหน้า
            - iOS momentum: -webkit-overflow-scrolling:touch
     2) ไม่แตะ Stepper · Rule chip · answered logic · CK_SEED
-->
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ConstructQ — เทมเพลท Checklist (v16.0)</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<style>
  :root{
    --brand-50:#E8F6F5; --brand-100:#DFF1EF; --brand-200:#C5E5E3; --brand-300:#A7DDD9;
    --brand-400:#5BC4BD; --brand-500:#2BA8A2; --brand-600:#1E8C86; --brand-700:#167571;
    --gold:#FFD23F; --gold-light:#FFE47A; --gold-dark:#E6B800;
    --coral:#EF6C4A; --coral-light:#FF8A6A; --coral-dark:#D45233;
    --sky:#5DADE2; --cream:#FFF8E7;
    --ink-50:#F7F9F9; --ink-100:#F0F3F2; --ink-200:#E2E8E7;
    --ink-300:#C8D0CF; --ink-400:#94A2A0; --ink-500:#6B7574;
    --ink-700:#3D4544; --ink-900:#0F172A;
    --success-500:#27AE60; --success-700:#1E8449;
    --warning-500:#F59E0B; --warning-700:#A37500;
    --info-500:#5DADE2; --info-700:#1F6FCF;
    --danger-500:#EF6C4A; --danger-700:#D45233;
    --bg:#EFF8F7;

    /* ============ AppShell tokens (aligned with ConstructQ_AppShell.html) ============ */
    --teal:#2BA8A2; --teal-light:#3CC4BD; --teal-dark:#1E8C86; --teal-soft:#B5E5E1; --teal-bg:#E8F6F5;
    --surface:#EFF8F7; --card:#FFFFFF;
    --ink:#0E0F0F; --ink-2:#2A2A2A; --muted:#7A8590;
    --line:#EEF1F3; --line-strong:#DDE3E7;
    --shadow-sm:0 1px 2px rgba(14,15,15,.04);
    --shadow-md:0 4px 12px rgba(14,15,15,.06);
    --radius-pill:999px;
    --sidebar-w:260px; --header-h:60px;
  }
  *{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}
  body{font-family:'Sarabun','IBM Plex Sans Thai','Inter',system-ui,sans-serif;color:var(--ink-900);background:var(--bg);font-size:14px;-webkit-font-smoothing:antialiased;overflow:hidden}
  button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

  /* ============================================================
     App Shell — copied from ConstructQ_AppShell.html (canonical)
     ============================================================ */
  .app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--header-h) 1fr;height:100vh;overflow:hidden}
  .svg-defs{position:absolute;width:0;height:0;overflow:hidden}

  /* SIDEBAR */
  .sidebar{grid-row:1 / 3;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
  .logo-block{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);cursor:pointer;flex-shrink:0}
  .logo-svg{width:38px;height:38px;flex-shrink:0}
  .logo-text{display:flex;flex-direction:column;line-height:1.15}
  .logo-name{font-weight:800;font-size:15px;letter-spacing:-.2px;color:var(--ink-900)}
  .logo-sub{font-size:9.5px;color:var(--muted);font-weight:600;letter-spacing:1.2px;text-transform:uppercase}

  .sidebar-search{padding:12px 14px;flex-shrink:0}
  .sb-input-wrap{position:relative}
  .sb-input{width:100%;padding:8px 12px 8px 34px;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);font-size:13px;color:var(--ink-700);outline:none}
  .sb-input:focus{border-color:var(--teal);background:#fff}
  .sb-input::placeholder{color:var(--muted)}
  .sb-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}

  .nav{flex:1;overflow-y:auto;padding:6px 10px 14px}
  .nav::-webkit-scrollbar{width:6px}
  .nav::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
  .nav-section{margin-top:12px}
  .nav-section:first-child{margin-top:4px}
  .nav-section-label{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;padding:6px 12px 4px}
  .nav-item{width:100%;text-align:left;padding:9px 12px;border-radius:10px;display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--ink-700);margin-bottom:1px;position:relative;transition:background .12s, color .12s}
  .nav-item:hover{background:var(--surface)}
  .nav-item.active{background:var(--teal-bg);color:var(--teal-dark);font-weight:600}
  .nav-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--teal);border-radius:99px}
  .nav-icon{width:18px;height:18px;flex-shrink:0;opacity:.85}
  .nav-item.active .nav-icon{opacity:1}

  .nav-group{margin-bottom:2px}
  .nav-main{width:100%;text-align:left;padding:9px 12px;border-radius:10px;display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink-700);transition:background .12s}
  .nav-main:hover{background:var(--surface)}
  .nav-main.open{background:var(--teal-bg);color:var(--teal-dark)}
  .nav-main .chev{margin-left:auto;transition:transform .2s;color:var(--muted);flex-shrink:0}
  .nav-main.open .chev{transform:rotate(180deg);color:var(--teal-dark)}
  .nav-subs{max-height:0;overflow:hidden;transition:max-height .25s ease, padding .15s;padding:0 0 0 10px}
  .nav-subs.open{max-height:500px;padding:4px 0 6px 10px}
  .nav-sub{width:100%;text-align:left;padding:7px 12px 7px 22px;border-radius:6px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:1px;position:relative}
  .nav-sub::before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
  .nav-sub:hover{background:var(--surface);color:var(--ink-700)}
  .nav-sub:hover::before{background:var(--muted)}
  .nav-sub.active{background:var(--teal-bg);color:var(--teal-dark);font-weight:600}
  .nav-sub.active::before{background:var(--teal);width:8px;height:8px}

  .sidebar-foot{padding:10px 14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);flex-shrink:0}
  .sidebar-foot .ver{font-weight:700}

  /* TOPBAR */
  .topbar{grid-column:2;grid-row:1;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 22px;position:relative;z-index:20}
  .org-chip{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:var(--radius-pill);cursor:pointer;transition:background .12s;background:transparent;color:var(--ink-700)}
  .org-chip:hover{background:var(--surface)}
  .org-logo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#FFE4F0;flex-shrink:0;position:relative;border:1px solid #F8BBD0;box-shadow:0 1px 3px rgba(236,64,122,.12)}
  .org-logo svg{display:block;width:24px;height:24px}
  .org-logo::after{content:"";position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;background:var(--gold);border:2px solid var(--card)}
  .org-name{font-weight:700;font-size:14px;letter-spacing:.3px;color:var(--ink-900)}
  .org-chev{color:var(--muted);margin-left:2px}
  .topbar-spacer{flex:1}
  .topbar-actions{display:flex;align-items:center;gap:6px}

  .fs-group{display:inline-flex;padding:3px;background:var(--surface);border-radius:var(--radius-pill);gap:1px;border:1px solid var(--line)}
  .fs-group button{padding:4px 10px;border-radius:var(--radius-pill);font-weight:700;font-size:12px;color:var(--muted)}
  .fs-group button:hover{color:var(--ink-900)}
  .fs-group button.active{background:var(--card);color:var(--ink-900);box-shadow:var(--shadow-sm)}

  /* Lang toggle (flag icons) */
  .lang-toggle{display:inline-flex;padding:3px;background:var(--surface);border-radius:var(--radius-pill);gap:2px;border:1px solid var(--line)}
  .lang-toggle button{padding:3px 8px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;transition:background .15s, opacity .15s, transform .15s;opacity:.55}
  .lang-toggle button:hover{opacity:.85}
  .lang-toggle button.active{background:var(--card);opacity:1;box-shadow:0 1px 3px rgba(14,15,15,.12), 0 0 0 1.5px var(--teal);transform:scale(1.02)}
  .lang-toggle .flag-svg{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08);overflow:hidden}

  .icon-btn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink-700);position:relative;transition:background .12s;background:transparent}
  .icon-btn:hover{background:var(--surface)}
  .icon-btn .notif-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--coral);border:2px solid var(--card)}

  .profile-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:background .12s;margin-left:4px}
  .profile-chip:hover{background:var(--card);border-color:var(--line-strong)}
  .profile-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg, var(--teal), var(--teal-dark));color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center}
  .profile-info{display:flex;flex-direction:column;line-height:1.15;gap:1px;min-width:0}
  .profile-username{font-size:12.5px;font-weight:700;color:var(--ink-2);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
  .profile-role{font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:.6px;text-transform:uppercase}

  /* Content wrap + breadcrumb */
  .content-wrap{grid-column:2;grid-row:2;background:var(--surface);overflow:auto;display:flex;flex-direction:column}
  .breadcrumb-bar{padding:18px 26px 8px;font-size:12.5px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px}
  .breadcrumb-bar a{color:var(--muted);cursor:pointer;transition:color .12s}
  .breadcrumb-bar a:hover{color:var(--teal-dark)}
  .breadcrumb-bar .crumb-sep{color:var(--line-strong)}
  .breadcrumb-bar .crumb-current{color:var(--ink-900);font-weight:600}

  /* CK app */
  .ck-app{max-width:1480px;margin:0 auto;padding:16px 24px 80px;width:100%}

  .ck-topbar{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:12px 20px;background:#fff;border:1px solid var(--ink-200);border-radius:14px;margin-bottom:18px}
  .ck-brand{display:flex;align-items:center;gap:12px;min-width:0}
  .ck-brand-logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
  .ck-brand-name{font-weight:800;font-size:15px}.ck-brand-meta{font-size:12px;color:var(--ink-500);margin-top:1px}
  .ck-project-pick{display:flex;align-items:center;gap:10px;background:var(--cream);border:1px solid var(--gold-light);border-radius:10px;padding:6px 12px}
  .ck-pick-label{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;color:var(--gold-dark);text-transform:uppercase;letter-spacing:.06em}
  .ck-pick-select{flex:1;border:0;background:transparent;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink-900);cursor:pointer;padding:4px 0;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A37500' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right center;padding-right:20px}
  .ck-pick-select:focus{outline:none}
  .ck-top-actions{display:flex;align-items:center;gap:12px}
  .ck-lang{display:inline-flex;padding:3px;background:var(--ink-100);border-radius:999px}
  .ck-lang button{border:0;background:transparent;padding:5px 12px;border-radius:999px;font-family:inherit;font-size:12px;font-weight:700;color:var(--ink-500);cursor:pointer}
  .ck-lang button.on{background:var(--ink-900);color:#fff}
  .ck-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand-500),var(--brand-600));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}

  .ck-page-head{margin-bottom:20px}
/* v5.0 — ConfirmDialog primary variant */
.ck-confirm-ico.primary{background:linear-gradient(135deg,#E8F6F5,#DFF1EF);color:#1E8C86;border:1px solid #B5E5E1}
/* v5.0 — Expand/Collapse-all buttons in editor toolbar */
.ck-btn.sm-ghost{background:transparent;color:#6B7280;border:1px solid #E5E7EB;font-weight:600;font-size:12px;padding:5px 10px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.ck-btn.sm-ghost:hover{background:#F3F4F6;color:#1E8C86;border-color:#5DC9C3}
/* v4.0 — inline row for title + actions */
.ck-page-head-flex{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ck-page-head-flex .ck-page-title{margin:0 0 4px}
.ck-page-head-flex .ck-page-sub{margin:0}
.ck-page-head-flex .ck-action-right{margin-top:2px;flex-shrink:0}
@media (max-width:900px){
  .ck-page-head-flex{flex-direction:column;align-items:stretch}
  .ck-page-head-flex .ck-action-right{justify-content:flex-end}
}
  .ck-crumb{font-size:12px;color:var(--ink-500);margin-bottom:6px}
  .ck-crumb b{color:var(--brand-700);font-weight:700}.ck-crumb span{margin:0 4px;color:var(--ink-300)}
  .ck-page-title{font-size:26px;font-weight:800;margin:0;letter-spacing:-0.01em;display:flex;align-items:center;gap:10px}
  .ck-page-title .emoji{font-size:30px}
  .ck-page-sub{font-size:14px;color:var(--ink-500);margin:4px 0 0;max-width:720px;line-height:1.55}

  /* Project picker — sits under page subtitle */
  .ck-page-projpick{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--cream); border:1px solid var(--gold-light); border-radius:10px;
    padding:8px 14px;
    box-shadow:0 1px 2px rgba(14,15,15,.04);
  }

  /* Action row — project picker (left) + action buttons (right) */
  .ck-action-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; flex-wrap:wrap; margin-top:14px;
  }
  .ck-action-right{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  .ck-page-projpick .ck-pick-label{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; color:var(--gold-dark); text-transform:uppercase; letter-spacing:.06em}
  .ck-page-projpick .ck-pick-select{
    border:0; background:transparent; outline:none;
    font-family:inherit; font-size:14px; font-weight:700; color:var(--ink-900);
    cursor:pointer; padding:2px 4px; min-width:240px;
  }
  .ck-page-projpick .ck-pick-select:focus{outline:none}

  .ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:10px;border:1px solid transparent;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
  .ck-btn.primary{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--ink-900);box-shadow:0 4px 16px rgba(255,210,63,.35)}
  .ck-btn.primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
  .ck-btn.teal{background:var(--brand-500);color:#fff;box-shadow:0 4px 12px rgba(43,168,162,.22)}
  .ck-btn.teal:hover{background:var(--brand-600)}
  .ck-btn.outline{background:#fff;color:var(--brand-700);border-color:var(--brand-300)}
  .ck-btn.outline:hover{background:var(--brand-50)}
  .ck-btn.outline.danger{color:var(--coral-dark);border-color:var(--coral-light)}
  .ck-btn.outline.danger:hover{background:#FFEDE5}
  .ck-btn.ghost{background:#fff;color:var(--ink-700);border-color:var(--ink-200)}
  .ck-btn.ghost:hover{background:var(--ink-100)}
  .ck-btn.danger{background:var(--coral);color:#fff}
  .ck-btn.danger:hover{background:var(--coral-dark)}
  .ck-btn.sm{padding:6px 10px;font-size:12px}
  .ck-btn:disabled{opacity:.45;cursor:not-allowed}

  .ck-icon-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--ink-200);background:#fff;color:var(--ink-700);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .ck-icon-btn:hover{background:var(--ink-100)}
  .ck-icon-btn.danger{color:var(--coral-dark);border-color:var(--coral-light)}
  .ck-icon-btn.danger:hover{background:#FFEDE5}
  .ck-icon-btn.ghost-sm{width:22px;height:22px;border-color:transparent}
  .ck-icon-btn.ghost-sm:hover{background:var(--ink-100)}

  .ck-body{display:grid;grid-template-columns:300px 1fr;gap:18px}

  /* Sidebar list */
  .ck-sidebar-card{background:#fff;border:1px solid var(--ink-200);border-radius:14px;overflow:hidden;align-self:start;position:sticky;top:80px;max-height:calc(100vh - 100px);display:flex;flex-direction:column}
  .ck-sidebar-head{padding:14px 16px;border-bottom:1px solid var(--ink-100);display:flex;justify-content:space-between;align-items:center;gap:8px}
  .ck-sidebar-title{font-size:12px;font-weight:800;color:var(--ink-700);text-transform:uppercase;letter-spacing:.06em}
  .ck-sidebar-count{font-size:11px;color:var(--ink-500);margin-top:2px}
  .ck-side-list{padding:8px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
  .ck-side-item{text-align:left;background:#fff;border:1px solid transparent;border-radius:10px;padding:10px 12px;cursor:pointer;font-family:inherit;transition:all .15s;width:100%}
  .ck-side-item:hover{background:var(--ink-50)}
  .ck-side-item.on{background:var(--brand-50);border-color:var(--brand-200)}
  .ck-side-item-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .ck-side-name{font-size:13px;font-weight:700;color:var(--ink-900)}
  .ck-side-item.on .ck-side-name{color:var(--brand-700)}
  .ck-side-item-bot{font-size:11px;color:var(--ink-500);margin-top:4px;display:flex;gap:4px;flex-wrap:wrap}
  .ck-status-pill{padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
  .ck-status-pill.draft{background:var(--ink-100);color:var(--ink-700)}
  .ck-status-pill.published{background:#DDF6E7;color:var(--success-700)}
  .ck-status-pill.archived{background:var(--cream);color:var(--gold-dark)}
  .ck-side-empty{padding:24px 16px;text-align:center;color:var(--ink-400);font-size:12px;border:1.5px dashed var(--ink-200);border-radius:10px;margin:12px}

  /* Editor */
  .ck-main{min-width:0}
  .ck-editor{background:#fff;border:1px solid var(--ink-200);border-radius:14px;overflow:hidden}
  .ck-empty-state{background:#fff;border:1px dashed var(--ink-200);border-radius:14px;padding:80px 32px;text-align:center;color:var(--ink-500)}
  .ck-empty-ico{width:64px;height:64px;border-radius:50%;background:var(--brand-50);color:var(--brand-500);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}

  .ck-edit-head{padding:22px 24px;border-bottom:1px solid var(--ink-100);background:#fff}
  .ck-edit-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
  .ck-edit-title{flex:1;border:0;background:transparent;font-family:inherit;font-size:22px;font-weight:800;color:var(--ink-900);letter-spacing:-0.01em;padding:4px 0;border-bottom:2px solid transparent;transition:border-color .15s}
  .ck-edit-title:focus{outline:none;border-bottom-color:var(--brand-400)}
  .ck-edit-title::placeholder{color:var(--ink-400)}
  .ck-edit-head-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap}

  .ck-edit-meta{display:grid;grid-template-columns:1.8fr 0.6fr 1.6fr;gap:16px;padding:14px 16px;background:var(--ink-50);border-radius:12px}
  .ck-meta-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
  .ck-meta-k{font-size:11px;font-weight:800;color:var(--ink-500);text-transform:uppercase;letter-spacing:.04em}
  .ck-meta-select,.ck-meta-input{font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-900);border:1px solid var(--ink-200);border-radius:8px;padding:6px 10px;background:#fff;max-width:100%}
  .ck-meta-select{padding-right:28px;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7574' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 8px center}
  .ck-meta-select:focus,.ck-meta-input:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(43,168,162,.15)}
  .ck-meta-hint{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--brand-700);margin-top:2px}

  .ck-roles-pills{display:flex;flex-wrap:wrap;gap:4px}
  .ck-role-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--ink-200);font-family:inherit;font-size:11px;font-weight:700;color:var(--ink-700);cursor:pointer}
  .ck-role-pill.on{background:var(--brand-500);color:#fff;border-color:var(--brand-500)}

  .ck-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
/* v6.0 — Section expand/collapse toolbar (moved below delete/save row) */
.ck-sec-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:14px;padding:0 2px}
.ck-sec-toolbar .lbl{font-size:11px;color:#6B7280;font-weight:600;margin-right:6px}

  .ck-stat{background:#fff;border:1px solid var(--ink-200);border-radius:12px;padding:10px 14px}
  .ck-stat-n{font-size:22px;font-weight:800;letter-spacing:-0.01em;line-height:1}
  .ck-stat-l{font-size:11px;color:var(--ink-500);margin-top:4px;font-weight:600}
  .ck-stat.brand{border-color:var(--brand-300);background:linear-gradient(180deg,var(--brand-50) 0%,#fff 60%)}
  .ck-stat.brand .ck-stat-n{color:var(--brand-700)}
  .ck-stat.info{border-color:#B7CFF6;background:linear-gradient(180deg,#E6F2FB 0%,#fff 60%)}
  .ck-stat.info .ck-stat-n{color:var(--info-700)}
  .ck-stat.warning{border-color:var(--gold-light);background:linear-gradient(180deg,var(--cream) 0%,#fff 60%)}
  .ck-stat.warning .ck-stat-n{color:var(--gold-dark)}
  .ck-stat.success{border-color:#ABE6BE;background:linear-gradient(180deg,#DDF6E7 0%,#fff 60%)}
  .ck-stat.success .ck-stat-n{color:var(--success-700)}
  .ck-stat-meta{background:#fff;border:1px solid var(--ink-200);border-radius:12px;padding:10px 14px;font-size:11px;color:var(--ink-500);display:flex;flex-direction:column;gap:2px}
  .ck-stat-meta strong{color:var(--ink-900);font-size:13px;font-weight:700}
  .ck-stat-meta b{color:var(--ink-700);font-weight:700}

  .ck-sections{padding:18px 24px;display:flex;flex-direction:column;gap:18px;background:var(--bg)}
  .ck-section{background:#fff;border:1px solid var(--ink-200);border-radius:14px;overflow:hidden}
  .ck-section-head{display:grid;grid-template-columns:28px 36px 1fr 30px;gap:10px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--ink-100);background:var(--ink-50)}
  .ck-collapse{border:0;background:transparent;cursor:pointer;padding:4px;align-self:center}
  .ck-collapse-ico{transition:transform .2s;color:var(--ink-500)}
  .ck-collapse-ico.open{transform:rotate(180deg)}
  .ck-section-num{width:36px;height:36px;border-radius:10px;background:var(--brand-500);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;align-self:center}
  .ck-section-title{width:100%;border:0;background:transparent;font-family:inherit;font-size:15px;font-weight:800;color:var(--ink-900);padding:2px 0}
  .ck-section-title:focus{outline:none}.ck-section-title::placeholder{color:var(--ink-400);font-weight:500}
  .ck-section-desc{width:100%;border:0;background:transparent;font-family:inherit;font-size:12px;color:var(--ink-500);padding:2px 0;margin-top:2px}
  .ck-section-desc:focus{outline:none}

  .ck-questions{padding:12px 16px;display:flex;flex-direction:column;gap:10px}
  .ck-q-empty{padding:28px 16px;text-align:center;color:var(--ink-400);font-size:12px;border:1.5px dashed var(--ink-200);border-radius:10px;margin:12px 16px 0}

  .ck-q{display:grid;grid-template-columns:132px 1fr auto;gap:14px;padding:14px;border:1px solid var(--ink-200);border-radius:12px;background:#fff;transition:all .15s}
  .ck-q:hover{border-color:var(--brand-300)}
  .ck-q-rail{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
  .ck-q-num{background:var(--ink-100);color:var(--ink-700);padding:2px 8px;border-radius:6px;font-size:10px;font-weight:800;font-family:ui-monospace,monospace}
  .ck-q-type{display:inline-flex;align-items:center;gap:5px;background:var(--brand-50);color:var(--brand-700);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700}

  .ck-q-body{display:flex;flex-direction:column;gap:8px;min-width:0}
  .ck-q-label{border:0;background:transparent;padding:4px 0;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink-900);border-bottom:1px solid transparent;transition:border-color .15s}
  .ck-q-label:focus{outline:none;border-bottom-color:var(--brand-400)}
  .ck-q-label::placeholder{color:var(--ink-400);font-weight:500}
  .ck-q-help{border:0;background:transparent;font-family:inherit;font-size:12px;color:var(--ink-500);padding:2px 0}
  .ck-q-help:focus{outline:none}

  .ck-q-config{display:flex;flex-direction:column;gap:6px;margin-top:4px}
  .ck-q-config-row{display:flex;gap:8px;margin-top:4px}
  .ck-q-config-field{display:flex;flex-direction:column;gap:4px;min-width:120px}
  .ck-q-config-field span{font-size:11px;font-weight:700;color:var(--ink-500)}
  .ck-q-config-label{font-size:11px;font-weight:800;color:var(--ink-500);text-transform:uppercase;letter-spacing:.04em}
/* v7.0 — Criteria panel */
.ck-crit{margin-top:10px;background:linear-gradient(135deg,#FFF9DB,#FEF3C7);border:1px solid #FDE68A;border-radius:10px;padding:12px 14px}
.ck-crit-title{font-size:12px;font-weight:800;color:#92400E;margin-bottom:4px}
.ck-crit-hint{font-size:10.5px;color:#78716C;font-style:italic;margin-bottom:8px}
.ck-crit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ck-crit-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ck-crit-field{display:flex;flex-direction:column;gap:3px}
.ck-crit-field span{font-size:10.5px;font-weight:700;color:#3D4544}
.ck-crit-field input,.ck-crit-field select{font-family:inherit;font-size:11.5px;padding:5px 8px;border:1px solid #E5E7EB;border-radius:6px;background:#fff;color:#0E0F0F;outline:none;box-sizing:border-box}
.ck-crit-field input:focus,.ck-crit-field select:focus{border-color:#2BA8A2;background:#FAFEFE}
.ck-crit-preview{margin-top:8px;padding:7px 10px;background:#fff;border:1px dashed #D97706;border-radius:6px;font-size:11px;color:#92400E;font-weight:600}
.ck-crit-preview .lbl{color:#78716C;font-style:italic;margin-right:5px}

/* v7.0 — Simulator in phone preview */
.ck-phone-sim{margin-top:10px;background:#F8FAFC;border:1.5px dashed #94A3B8;border-radius:10px;padding:10px 12px}
.ck-phone-sim-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:10.5px;font-weight:800;color:#334155}
.ck-phone-sim-row{display:flex;gap:6px;align-items:center}
.ck-phone-sim-row input{flex:1;font-family:inherit;font-size:12px;padding:6px 8px;border:1px solid #CBD5E1;border-radius:6px;background:#fff;outline:none}
.ck-phone-sim-row input:focus{border-color:#2BA8A2}
.ck-phone-verdict{margin-top:7px;padding:6px 10px;border-radius:7px;font-size:11.5px;font-weight:800;display:flex;align-items:center;gap:6px}
.ck-phone-verdict.pass{background:#DCFCE7;color:#166534;border:1px solid #86EFAC}
.ck-phone-verdict.warn{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D}
.ck-phone-verdict.fail{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5}
.ck-phone-verdict.none{background:#F1F5F9;color:#475569;border:1px solid #CBD5E1}
.ck-phone-verdict-reason{font-weight:600;font-size:10.5px;opacity:.9}

  .ck-input{border:1px solid var(--ink-200);background:#fff;border-radius:8px;padding:6px 10px;font-family:inherit;font-size:12px;color:var(--ink-900);width:100%}
  .ck-input:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(43,168,162,.15)}

  .ck-options-list{display:flex;flex-direction:column;gap:4px}
  .ck-option-row{display:grid;grid-template-columns:20px 1fr 22px;gap:6px;align-items:center}
  .ck-option-marker{color:var(--ink-400);font-size:13px;text-align:center}
  .ck-add-option{border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:12px;color:var(--brand-600);font-weight:700;display:inline-flex;align-items:center;gap:4px;padding:6px 0;align-self:flex-start}
  .ck-add-option:hover{color:var(--brand-700)}

  .ck-q-foot{display:flex;gap:16px;padding-top:6px;border-top:1px dashed var(--ink-100);margin-top:4px}
  .ck-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-700);cursor:pointer}
  .ck-toggle input{accent-color:var(--brand-500)}

  .ck-q-actions{display:flex;flex-direction:column;gap:4px}

  /* Checklist Template Picker modal */
  .ck-modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:24px;animation:fadeBg .2s ease}
  @keyframes fadeBg{from{opacity:0}to{opacity:1}}
  .ck-modal-lg{background:#fff;border-radius:18px;width:min(100%, 1180px);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 32px 80px rgba(20,22,30,.25);animation:popUp .25s ease}
  @keyframes popUp{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
  .ck-modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 24px;border-bottom:1px solid var(--ink-200);gap:16px}
  .ck-modal-title{font-size:18px;font-weight:800;display:inline-flex;align-items:center;gap:8px}
  .ck-modal-sub{font-size:13px;color:var(--ink-500);margin-top:4px}
  .ck-modal-foot{padding:14px 24px;border-top:1px solid var(--ink-200);display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
  .ck-tpl-body{display:grid;grid-template-columns:320px 1fr;flex:1;min-height:0;border-top:1px solid var(--ink-100)}
  .ck-tpl-list{padding:14px;border-right:1px solid var(--ink-200);overflow-y:auto;display:flex;flex-direction:column;gap:8px;background:var(--ink-50);max-height:62vh}
  .ck-tpl-card{display:grid;grid-template-columns:40px 1fr 22px;gap:12px;text-align:left;padding:12px;background:#fff;border:1.5px solid var(--ink-200);border-radius:14px;cursor:pointer;transition:all .15s;font-family:inherit}
  .ck-tpl-card:hover{border-color:var(--brand-300)}
  .ck-tpl-card.on{border-color:var(--brand-500);background:#fff;box-shadow:0 4px 12px rgba(43,168,162,.18)}
  .ck-tpl-icon{width:40px;height:40px;border-radius:10px;background:var(--brand-50);color:var(--brand-700);display:flex;align-items:center;justify-content:center;font-size:20px}
  .ck-tpl-card.on .ck-tpl-icon{background:var(--brand-500);color:#fff}
  .ck-tpl-text{display:flex;flex-direction:column;gap:2px;min-width:0}
  .ck-tpl-name{font-size:13px;font-weight:800;color:var(--ink-900)}
  .ck-tpl-desc{font-size:11px;color:var(--ink-500);line-height:1.5}
  .ck-tpl-check{width:22px;height:22px;border-radius:50%;background:var(--brand-500);color:#fff;display:inline-flex;align-items:center;justify-content:center;align-self:center}
  .ck-tpl-preview{display:flex;flex-direction:column;padding:18px 22px;min-height:0;max-height:62vh;overflow-y:auto}
  .ck-tpl-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}
  .ck-tpl-preview-eyebrow{font-size:11px;font-weight:800;color:var(--brand-600);text-transform:uppercase;letter-spacing:.06em}
  .ck-tpl-preview-title{font-size:20px;font-weight:800;margin:2px 0 0}
  .ck-tpl-preview-desc{font-size:12.5px;color:var(--ink-500);margin:4px 0 12px;line-height:1.6}
  .ck-tpl-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .ck-tpl-stat{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;background:var(--brand-50);color:var(--brand-700);border-radius:99px;font-size:11.5px;font-weight:700}
  .ck-tpl-stat.gold{background:#FFF8E7;color:#B07900}
  .ck-tpl-stat.coral{background:#FFE8E0;color:#A03A1F}
  .ck-tpl-section-head{display:flex;align-items:center;gap:8px;margin:14px 0 6px;padding:8px 12px;background:var(--brand-50);border-radius:9px;font-size:12.5px;font-weight:800;color:var(--brand-700)}
  .ck-tpl-section-head .ck-tpl-section-num{background:var(--brand-500);color:#fff;border-radius:6px;padding:2px 7px;font-size:10.5px}
  .ck-tpl-section-head .ck-tpl-section-count{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--ink-500);background:#fff;padding:2px 8px;border-radius:99px;border:1px solid var(--ink-200)}
  .ck-tpl-q{display:grid;grid-template-columns:36px 1fr auto;gap:10px;padding:8px 12px;border-bottom:1px solid var(--ink-100);font-size:12.5px;line-height:1.45}
  .ck-tpl-q:last-child{border-bottom:0}
  .ck-tpl-q .ck-tpl-q-code{font-family:'Inter',monospace;font-size:10.5px;font-weight:700;color:var(--ink-500);background:var(--ink-50);padding:2px 6px;border-radius:5px;align-self:flex-start;text-align:center}
  .ck-tpl-q .ck-tpl-q-text{min-width:0}
  .ck-tpl-q .ck-tpl-q-label{font-weight:600;color:var(--ink-900)}
  .ck-tpl-q .ck-tpl-q-meta{font-size:10.5px;color:var(--ink-500);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap}
  .ck-tpl-q .ck-tpl-q-meta .sev{font-weight:700;padding:1px 7px;border-radius:99px;font-size:10px}
  .ck-tpl-q .ck-tpl-q-meta .sev.critical{background:#FEE;color:#A02020}
  .ck-tpl-q .ck-tpl-q-meta .sev.high{background:#FFF8E7;color:#B07900}
  .ck-tpl-q .ck-tpl-q-meta .sev.medium{background:#E8F6F5;color:var(--brand-700)}

  .ck-add-section{border:1.5px dashed var(--brand-300);background:#fff;border-radius:12px;padding:14px;color:var(--brand-600);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}
  .ck-add-section:hover{border-color:var(--brand-500);background:var(--brand-50)}

  /* Type picker */
  .ck-type-picker{padding:10px 16px 16px}
  .ck-type-picker-title{font-size:11px;font-weight:800;color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
  .ck-type-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  .ck-type-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border:1px solid var(--ink-200);border-radius:10px;background:#fff;cursor:pointer;font-family:inherit;transition:all .15s}
  .ck-type-card:hover{border-color:var(--brand-400);background:var(--brand-50);transform:translateY(-1px)}
  .ck-type-ico{width:32px;height:32px;border-radius:8px;background:var(--brand-50);color:var(--brand-600);display:flex;align-items:center;justify-content:center}
  .ck-type-card:hover .ck-type-ico{background:var(--brand-500);color:#fff}
  .ck-type-name{font-size:11px;font-weight:700;color:var(--ink-700)}

  /* Modal */
  .ck-modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:24px;animation:ckFade .2s ease}
  @keyframes ckFade{from{opacity:0}to{opacity:1}}
  .ck-confirm{background:#fff;border-radius:14px;padding:28px;max-width:420px;text-align:center;box-shadow:0 32px 80px rgba(15,23,42,.25);animation:ckPop .25s ease}
  @keyframes ckPop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
  .ck-confirm-ico{width:48px;height:48px;border-radius:50%;background:#FFEDE5;color:var(--coral);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
  .ck-confirm h3{font-size:17px;margin:0 0 6px;font-weight:800}
  .ck-confirm p{font-size:13px;color:var(--ink-500);margin:0 0 20px;line-height:1.5}
  .ck-confirm-acts{display:flex;gap:8px;justify-content:center}

  /* Mobile preview */
  .ck-preview-wrap{background:#fff;border-radius:18px;padding:16px;box-shadow:0 32px 80px rgba(15,23,42,.25);animation:ckPop .25s ease}
  .ck-preview-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:16px;padding:4px 4px 0}
  .ck-preview-title{font-size:14px;font-weight:800}
  .ck-preview-sub{font-size:11px;color:var(--ink-500);margin-top:2px}

  .ck-phone{width:340px;height:700px;background:#1A1F2B;border-radius:40px;padding:10px;box-shadow:0 24px 60px rgba(15,23,42,.3);position:relative}
  .ck-phone-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:96px;height:24px;background:#1A1F2B;border-radius:999px;z-index:10}
  .ck-phone-screen{width:100%;height:100%;background:var(--ink-50);border-radius:32px;overflow-y:auto;position:relative}
  .ck-phone-status{display:flex;justify-content:space-between;padding:14px 22px 4px;font-size:12px;font-weight:600}
  .ck-phone-header{display:flex;align-items:center;gap:8px;padding:14px 18px 12px;border-bottom:1px solid var(--ink-200);background:#fff}
  .ck-phone-back{color:var(--brand-500);font-size:18px;font-weight:600;cursor:pointer}
  .ck-phone-h{font-size:14px;font-weight:800;flex:1;text-align:center;padding-right:18px}
  .ck-phone-meta{display:flex;padding:10px 14px;gap:10px;background:#fff;border-bottom:1px solid var(--ink-200)}
  .ck-phone-meta>div{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
  .ck-phone-meta span{font-size:9px;color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
  .ck-phone-meta b{font-size:11px;color:var(--ink-900);font-weight:700}
  .ck-phone-progress{padding:10px 14px;background:#fff;border-bottom:1px solid var(--ink-200);display:flex;flex-direction:column;gap:6px}
  .ck-phone-progress>span{font-size:11px;color:var(--ink-500)}
  .ck-phone-prog-bar{height:4px;background:var(--ink-200);border-radius:999px;overflow:hidden}
  .ck-phone-prog-bar>i{display:block;height:100%;background:var(--brand-500);border-radius:999px}
  .ck-phone-body{padding:12px 14px 60px;display:flex;flex-direction:column;gap:14px}
  /* v8.0 — Mobile Preview: Tab strip for sections
     v16.0 — Scroll bar visible when tabs overflow */
  .ck-phone-tabs{display:flex;gap:6px;padding:8px 12px 4px;background:#fff;border-bottom:1px solid var(--ink-200);overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--brand-500) #E5E7EB}
  .ck-phone-tabs::-webkit-scrollbar{height:6px;background:transparent}
  .ck-phone-tabs::-webkit-scrollbar-track{background:#E5E7EB;border-radius:99px;margin:0 12px}
  .ck-phone-tabs::-webkit-scrollbar-thumb{background:var(--brand-500);border-radius:99px;min-width:24px}
  .ck-phone-tabs::-webkit-scrollbar-thumb:hover{background:var(--brand-600)}
  .ck-phone-tab{flex-shrink:0;background:var(--ink-50);border:1.5px solid var(--ink-200);border-radius:10px;padding:6px 10px;font-family:inherit;font-size:11px;font-weight:700;color:var(--ink-700);cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;white-space:nowrap}
  .ck-phone-tab:hover{border-color:var(--brand-300);background:var(--brand-50)}
  .ck-phone-tab.on{background:var(--brand-500);color:#fff;border-color:var(--brand-500);box-shadow:0 2px 6px rgba(43,168,162,.25)}
  .ck-phone-tab-n{background:rgba(0,0,0,.15);color:inherit;border-radius:4px;padding:1px 5px;font-size:9.5px;font-weight:800;min-width:16px;text-align:center}
  .ck-phone-tab.on .ck-phone-tab-n{background:rgba(255,255,255,.28)}
  /* v8.0 — Mobile Preview: Stepper (one-at-a-time) */
  .ck-phone-stepper{padding:10px 14px 6px;background:#fff;border-bottom:1px solid var(--ink-200);display:flex;flex-direction:column;gap:8px}
  .ck-phone-stepper-top{display:flex;align-items:center;justify-content:space-between}
  .ck-phone-stepper-title{font-size:11.5px;font-weight:800;color:var(--ink-700)}
  .ck-phone-stepper-count{font-size:11px;font-weight:700;color:var(--brand-600);background:var(--brand-50);border-radius:6px;padding:2px 8px}
  /* v11.0 — Circle stepper with sequence + check badge */
  .ck-phone-stepper-dots{display:flex;align-items:center;gap:0;flex-wrap:wrap;padding:2px 0}
  .ck-phone-stepper-dot{position:relative;width:28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid var(--ink-200);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--ink-500);transition:all .18s;flex-shrink:0}
  .ck-phone-stepper-line{width:12px;height:2px;background:var(--ink-200);flex-shrink:0;transition:background .18s}
  .ck-phone-stepper-line.done{background:var(--success-500)}
  .ck-phone-stepper-dot.on{background:var(--brand-500);border-color:var(--brand-500);color:#fff;box-shadow:0 0 0 3px rgba(43,168,162,.18);transform:scale(1.08)}
  .ck-phone-stepper-dot.done{background:var(--success-500);border-color:var(--success-500);color:#fff}
  /* v14.0 — Combined state: current + already answered · keep green fill + add teal ring */
  .ck-phone-stepper-dot.on.done{background:var(--success-500);border-color:var(--success-500);color:#fff;box-shadow:0 0 0 3px rgba(43,168,162,.35);transform:scale(1.08)}
  /* v13.0 — Yellow ✓ badge in top-right corner (number stays fully visible) */
  .ck-phone-stepper-dot .ck-check-badge{position:absolute;top:-6px;right:-6px;width:16px;height:16px;color:#FBBF24;display:inline-flex;align-items:center;justify-content:center;pointer-events:none;background:transparent;border:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
  .ck-phone-stepper-dot .ck-check-badge svg{width:16px;height:16px;stroke-width:4}
  /* v13.0 — Skipped state: past item that was NOT answered · gray, no check */
  .ck-phone-stepper-dot.skipped{background:#F1F5F9;border-color:var(--ink-300);color:var(--ink-500)}
  /* v11.0 — Rule chip (replaces try-answer simulator) */
  .ck-phone-rule{margin-top:12px;background:linear-gradient(180deg, #FFF7E6, #FFFCF2);border:1.5px solid #F5D688;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
  .ck-phone-rule-head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#8A5A00;text-transform:uppercase;letter-spacing:.04em}
  .ck-phone-rule-body{font-size:13px;font-weight:700;color:#5C3D00;line-height:1.4;font-family:'Inter',monospace}
  .ck-phone-rule-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
  .ck-phone-rule-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px}
  .ck-phone-rule-chip.ncr{background:#FEE2E2;color:#991B1B}
  .ck-phone-rule-chip.warn{background:#FEF3C7;color:#92400E}
  .ck-phone-rule-chip.sev-critical{background:#FEE2E2;color:#991B1B}
  .ck-phone-rule-chip.sev-major{background:#FFEDD5;color:#9A3412}
  .ck-phone-rule-chip.sev-minor{background:#DBEAFE;color:#1E40AF}
  .ck-phone-current-q{padding:14px;background:#fff;border-radius:12px;border:1px solid var(--ink-200);margin:12px 14px 0;display:flex;flex-direction:column;gap:10px}
  .ck-phone-current-q .ck-phone-q-label{font-size:14px;font-weight:800;color:var(--ink-900);line-height:1.4}
  .ck-phone-current-q .ck-phone-q-help{font-size:11px;color:var(--ink-500);line-height:1.5}
  .ck-phone-step-nav{position:sticky;bottom:0;background:#fff;padding:10px 14px calc(env(safe-area-inset-bottom, 0) + 10px);border-top:1px solid var(--ink-200);display:flex;gap:8px}
  .ck-phone-step-btn{flex:1;padding:11px 12px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;border:1.5px solid transparent;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}
  .ck-phone-step-btn.prev{background:#fff;color:var(--ink-700);border-color:var(--ink-200)}
  .ck-phone-step-btn.prev:hover:not(:disabled){border-color:var(--ink-400);background:var(--ink-50)}
  .ck-phone-step-btn.prev:disabled{opacity:.4;cursor:not-allowed}
  .ck-phone-step-btn.next{background:var(--brand-500);color:#fff;box-shadow:0 3px 10px rgba(43,168,162,.28)}
  .ck-phone-step-btn.next:hover{background:var(--brand-600)}
  .ck-phone-step-btn.finish{background:var(--success-600);color:#fff;box-shadow:0 3px 10px rgba(39,174,96,.3)}
  .ck-phone-step-btn.finish:hover{background:var(--success-700)}
  .ck-phone-tab-progress{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-500);font-weight:600;padding:0 14px 6px}
  .ck-phone-tab-progress .bar{flex:1;height:3px;background:var(--ink-200);border-radius:2px;overflow:hidden}
  .ck-phone-tab-progress .bar>i{display:block;height:100%;background:var(--brand-500);border-radius:2px;transition:width .2s}
  /* v8.0 — Answer widget polish per question type */
  .ck-phone-input-row{display:flex;align-items:center;gap:8px}
  .ck-phone-input{width:100%;font-family:inherit;font-size:13px;padding:9px 11px;border:1.5px solid var(--ink-200);border-radius:8px;background:#fff;outline:none;transition:border-color .15s}
  .ck-phone-input:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(43,168,162,.12)}
  .ck-phone-unit{flex-shrink:0;font-size:12px;font-weight:800;color:var(--brand-700);background:var(--brand-50);border:1px solid var(--brand-200);border-radius:6px;padding:6px 10px;min-width:44px;text-align:center;white-space:nowrap}
  .ck-phone-color{display:flex;align-items:center;gap:8px}
  .ck-phone-color-chip{flex-shrink:0;width:36px;height:36px;border-radius:8px;border:2px solid var(--ink-200);background:#2BA8A2;box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}
  .ck-phone-passfail{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ck-phone-passfail button{padding:14px 8px;border-radius:10px;border:1.5px solid var(--ink-200);font-family:inherit;font-size:13px;font-weight:800;background:#fff;cursor:pointer;transition:all .15s}
  .ck-phone-passfail button.pass{color:var(--success-700);border-color:#ABE6BE}
  .ck-phone-passfail button.pass:hover{background:#F0FDF4;border-color:var(--success-500)}
  .ck-phone-passfail button.fail{color:var(--coral-dark);border-color:var(--coral-light)}
  .ck-phone-passfail button.fail:hover{background:#FEF2F2;border-color:var(--coral-dark)}
  .ck-phone-radios{display:flex;flex-direction:column;gap:6px}
  .ck-phone-radios label{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-800);padding:9px 11px;border:1.5px solid var(--ink-200);border-radius:9px;cursor:pointer;background:#fff;transition:all .15s;font-weight:500}
  .ck-phone-radios label:hover{border-color:var(--brand-300);background:var(--brand-50)}
  .ck-phone-radios label:has(input:checked){border-color:var(--brand-500);background:var(--brand-50);color:var(--brand-700);font-weight:700}
  .ck-phone-radios input{accent-color:var(--brand-500);width:15px;height:15px}
  .ck-phone-photo{width:100%;padding:14px 12px;border:2px dashed var(--brand-300);border-radius:10px;background:linear-gradient(180deg, var(--brand-50), #F7FEFE);cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--brand-700);font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}
  .ck-phone-photo:hover{border-color:var(--brand-500);background:var(--brand-50)}
  .ck-phone-sig{padding:36px 12px;border:2px dashed var(--ink-300);border-radius:10px;background:repeating-linear-gradient(45deg, #F8FAFC, #F8FAFC 8px, #F1F5F9 8px, #F1F5F9 12px);text-align:center;font-size:12px;color:var(--ink-500);font-weight:600;font-style:italic}
  .ck-phone-section{background:#fff;border-radius:12px;padding:12px;border:1px solid var(--ink-200)}
  .ck-phone-section-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--ink-900);padding-bottom:8px;margin-bottom:8px;border-bottom:1px dashed var(--ink-200)}
  .ck-phone-section-n{background:var(--brand-500);color:#fff;border-radius:5px;padding:2px 6px;font-size:10px;font-weight:800}

  .ck-phone-q{padding:8px 0;border-bottom:1px dashed var(--ink-100)}
  .ck-phone-q:last-child{border-bottom:none}
  .ck-phone-q-label{font-size:12px;font-weight:700;color:var(--ink-900);margin-bottom:4px}
  .ck-phone-q-label .ck-req{color:var(--coral);margin-left:2px}
  .ck-phone-q-help{font-size:10px;color:var(--ink-500);margin-bottom:6px;line-height:1.4}
  .ck-phone-input{width:100%;border:1px solid var(--ink-200);border-radius:8px;padding:6px 10px;font-family:inherit;font-size:12px;background:#fff}
  .ck-phone-input:focus{outline:none;border-color:var(--brand-500)}
  .ck-phone-input-row{display:flex;align-items:center;gap:8px}
  .ck-phone-unit{font-size:11px;color:var(--ink-500);font-weight:500}
  .ck-phone-color{display:flex;gap:8px;align-items:center}
  .ck-phone-color-chip{width:26px;height:26px;border-radius:8px;background:var(--brand-500);flex-shrink:0}
  .ck-phone-radios{display:flex;flex-direction:column;gap:4px}
  .ck-phone-radios label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-700)}
  .ck-phone-radios input{accent-color:var(--brand-500)}
  .ck-phone-passfail{display:flex;gap:6px}
  .ck-phone-passfail button{flex:1;padding:8px;border-radius:8px;border:1px solid var(--ink-200);font-family:inherit;font-size:12px;font-weight:700;background:#fff;cursor:pointer}
  .ck-phone-passfail .pass{color:var(--success-700);border-color:#ABE6BE}
  .ck-phone-passfail .fail{color:var(--coral-dark);border-color:var(--coral-light)}
  .ck-phone-photo{width:100%;padding:12px;border:1.5px dashed var(--brand-300);border-radius:8px;background:var(--brand-50);cursor:pointer;font-family:inherit;font-size:12px;color:var(--brand-700);font-weight:600}
  /* v2.0 — Mobile preview: required comment + photo */
  .ck-phone-q-req{margin-top:10px}
  .ck-phone-q-sub{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;gap:8px}
  .ck-phone-q-sub .lbl{font-size:11px;font-weight:700;color:var(--ink-700);display:inline-flex;align-items:center;gap:5px}
  .ck-req-chip{font-size:9px;font-weight:800;color:#fff;background:var(--coral);padding:2px 7px;border-radius:999px;letter-spacing:.04em}
  .ck-phone-comment{min-height:54px;resize:vertical}
  .ck-phone-photo-req{padding:14px 12px;display:flex;align-items:center;justify-content:center;gap:6px}

  .ck-phone-sig{padding:24px;border:1.5px dashed var(--ink-300);border-radius:8px;background:var(--ink-50);text-align:center;font-size:12px;color:var(--ink-400)}
  .ck-phone-submit{margin-top:8px;width:100%;padding:12px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--ink-900);border:0;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(255,210,63,.35)}

  .ck-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink-900);color:#fff;padding:12px 18px;border-radius:999px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:10px;box-shadow:0 12px 32px rgba(15,23,42,.18);z-index:300;animation:ckSlideUp .25s ease}
  .ck-toast-ico{width:20px;height:20px;border-radius:50%;background:var(--success-500);color:#fff;display:inline-flex;align-items:center;justify-content:center}
  @keyframes ckSlideUp{from{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

  @media (max-width:1100px){
    .ck-edit-meta{grid-template-columns:1fr}
    .ck-stats{grid-template-columns:repeat(2,1fr)}
    .ck-type-grid{grid-template-columns:repeat(4,1fr)}
  }
  @media (max-width:900px){
    .ck-body{grid-template-columns:1fr}
    .ck-sidebar-card{position:static;max-height:none}
    .ck-topbar{grid-template-columns:1fr;gap:10px}
    .ck-q{grid-template-columns:1fr}
  }
  @media (max-width:780px){.app{grid-template-columns:1fr}.sidebar{display:none}}
</style>
</head>
<body>
<!-- SVG defs (AppShell logo) -->
<svg class="svg-defs">
  <defs>
    <!-- Pink Ribbon Bow (Tarnas org logo) -->
    <symbol id="tarnas-bow" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="bowFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#F8BBD0"/>
          <stop offset="55%" stop-color="#EC407A"/>
          <stop offset="100%" stop-color="#C2185B"/>
        </linearGradient>
      </defs>
      <path d="M28 36 L18 60 L26 55 L32 42 Z" fill="url(#bowFill)" stroke="#AD1457" stroke-width="1.2" stroke-linejoin="round"/>
      <path d="M36 36 L46 60 L38 55 L32 42 Z" fill="url(#bowFill)" stroke="#AD1457" stroke-width="1.2" stroke-linejoin="round"/>
      <ellipse cx="18" cy="24" rx="13" ry="10" fill="url(#bowFill)" stroke="#AD1457" stroke-width="1.4"/>
      <ellipse cx="46" cy="24" rx="13" ry="10" fill="url(#bowFill)" stroke="#AD1457" stroke-width="1.4"/>
      <ellipse cx="15" cy="20" rx="5" ry="3" fill="#FCE4EC" opacity="0.7"/>
      <ellipse cx="43" cy="20" rx="5" ry="3" fill="#FCE4EC" opacity="0.7"/>
      <rect x="26" y="18" width="12" height="16" rx="2.5" fill="#C2185B" stroke="#880E4F" stroke-width="1.2"/>
      <rect x="29" y="22" width="6" height="8" rx="1" fill="#EC407A" opacity="0.85"/>
    </symbol>
    <symbol id="cq-logo" viewBox="0 0 200 200">
      <rect x="78"  y="28"  width="44"  height="28" rx="4" fill="#E8F6F5"/>
      <rect x="60"  y="56"  width="80"  height="28" rx="4" fill="#B5E5E1"/>
      <rect x="42"  y="84"  width="116" height="28" rx="4" fill="#5DC9C3"/>
      <rect x="24"  y="112" width="152" height="28" rx="4" fill="#3CC4BD"/>
      <rect x="8"   y="140" width="184" height="32" rx="5" fill="#1E8C86"/>
      <text x="100" y="135" text-anchor="middle" font-family="Inter, Arial Black, sans-serif" font-size="100" font-weight="900" fill="#0E0F0F">Q</text>
    </symbol>
  </defs>
</svg>

<div class="app">

  <!-- ============ SIDEBAR (AppShell canonical) ============ -->
  <aside class="sidebar">
    <div class="logo-block" title="กลับหน้าหลัก">
      <svg class="logo-svg"><use href="#cq-logo"/></svg>
      <div class="logo-text">
        <div class="logo-name">ConstructQ</div>
        <div class="logo-sub">QC Platform</div>
      </div>
    </div>

    <div class="sidebar-search">
      <div class="sb-input-wrap">
        <svg class="sb-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
        <input class="sb-input" placeholder="ค้นหา..." data-i18n-placeholder="sb.search" />
      </div>
    </div>

    <nav class="nav">

      <!-- OVERVIEW · ภาพรวม -->
      <div class="nav-section">
        <div class="nav-section-label" data-i18n="nav.overview">ภาพรวม</div>
        <button class="nav-item" data-page="dashboard" data-url="/dashboard" onclick="selectPage(this)">
          <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
          <span data-i18n="nav.dashboard">แดชบอร์ด</span>
        </button>
      </div>

      <!-- SERVICE · บริการ -->
      <div class="nav-section">
        <div class="nav-section-label" data-i18n="nav.service">บริการ</div>
        <button class="nav-item" data-page="subscribe" data-url="/service/subscribe" onclick="selectPage(this)">
          <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg>
          <span data-i18n="nav.subscribe">สมัครบริการ</span>
        </button>
        <button class="nav-item" data-page="packages" data-url="/service/packages" onclick="selectPage(this)">
          <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12.89 1.45 20 5v14l-7 4-7-4V5l7.11-3.55a2 2 0 011.78 0z"/><path d="M3 5l8 4M20 5l-8 4M11 9v13"/></svg>
          <span data-i18n="nav.packages">จัดการแพ็คเก็จ</span>
        </button>
      </div>

      <!-- MAIN WORK · งานหลัก -->
      <div class="nav-section">
        <div class="nav-section-label" data-i18n="nav.mainWork">งานหลัก</div>

        <div class="nav-group">
          <button class="nav-main" onclick="toggleGroup(this)">
            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><path d="M9 22V12h6v10"/></svg>
            <span data-i18n="nav.project">โครงการ / ไซต์</span>
            <svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
          </button>
          <div class="nav-subs">
            <button class="nav-sub" data-page="project-mgmt" data-url="/project/setup" onclick="selectPage(this)"><span data-i18n="nav.projectMgmt">จัดการโครงการ / ไซต์</span></button>
            <button class="nav-sub" data-page="document-mgmt" data-url="/project/drawing" onclick="selectPage(this)"><span data-i18n="nav.documentMgmt">จัดการเอกสาร</span></button>
            <button class="nav-sub" data-page="wbs-mgmt" data-url="/project/wbs" onclick="selectPage(this)"><span data-i18n="nav.wbsMgmt">จัดการ WBS</span></button>
          </div>
        </div>

        <div class="nav-group">
          <button class="nav-main open" onclick="toggleGroup(this)">
            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 11l3 3 5-7"/></svg>
            <span data-i18n="nav.inspection">ตรวจสอบคุณภาพ</span>
            <svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
          </button>
          <div class="nav-subs open">
            <button class="nav-sub" data-page="task-mgmt" data-url="/inspection/schedule" onclick="selectPage(this)"><span data-i18n="nav.taskMgmt">จัดการงาน</span></button>
            <button class="nav-sub active" data-page="checklist" data-url="/inspection/checklist" onclick="selectPage(this)"><span data-i18n="nav.checklist">จัดการ Checklist</span></button>
            <button class="nav-sub" data-page="workflow" data-url="/inspection/workflow" onclick="selectPage(this)"><span data-i18n="nav.workflow">จัดการลำดับการทำงาน</span></button>
          </div>
        </div>

        <div class="nav-group">
          <button class="nav-main" onclick="toggleGroup(this)">
            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86 1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
            <span data-i18n="nav.ncr">NCR — รายงานไม่สอดคล้อง</span>
            <svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
          </button>
          <div class="nav-subs">
            <button class="nav-sub" data-page="ncr-mgmt" data-url="/ncr/management" onclick="selectPage(this)"><span data-i18n="nav.ncrMgmt">จัดการ NCR</span></button>
          </div>
        </div>

        <button class="nav-item" data-page="report" data-url="/reports" onclick="selectPage(this)">
          <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg>
          <span data-i18n="nav.report">รายงาน</span>
        </button>
      </div>

      <!-- SETTING · ตั้งค่า -->
      <div class="nav-section">
        <div class="nav-section-label" data-i18n="nav.setting">ตั้งค่า</div>

        <div class="nav-group">
          <button class="nav-main" onclick="toggleGroup(this)">
            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            <span data-i18n="nav.me">ฉัน</span>
            <svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
          </button>
          <div class="nav-subs">
            <button class="nav-sub" data-page="profile" data-url="/setting/me/profile" onclick="selectPage(this)"><span data-i18n="nav.profile">โปรไฟล์</span></button>
            <button class="nav-sub" data-page="company-info" data-url="/setting/me/company" onclick="selectPage(this)"><span data-i18n="nav.companyInfo">ข้อมูลบริษัทฯ</span></button>
            <button class="nav-sub" data-page="billing" data-url="/setting/me/billing" onclick="selectPage(this)"><span data-i18n="nav.billing">บิลลิ่ง</span></button>
            <button class="nav-sub" data-page="notification" data-url="/setting/me/notification" onclick="selectPage(this)"><span data-i18n="nav.notification">แจ้งเตือน</span></button>
            <button class="nav-sub" data-page="language" data-url="/setting/me/language" onclick="selectPage(this)"><span data-i18n="nav.language">ภาษา</span></button>
          </div>
        </div>

        <div class="nav-group">
          <button class="nav-main" onclick="toggleGroup(this)">
            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0018 0V5"/><path d="M3 12a9 3 0 0018 0"/></svg>
            <span data-i18n="nav.masterData">ข้อมูลตั้งต้น</span>
            <svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
          </button>
          <div class="nav-subs">
            <button class="nav-sub" data-page="menu" data-url="/setting/master/menu" onclick="selectPage(this)"><span data-i18n="nav.menu">เมนู</span></button>
            <button class="nav-sub" data-page="rbac" data-url="/setting/master/rbac" onclick="selectPage(this)"><span data-i18n="nav.rbac">บทบาทผู้ใช้งาน</span></button>
            <button class="nav-sub" data-page="user" data-url="/setting/master/user" onclick="selectPage(this)"><span data-i18n="nav.user">ผู้ใช้งาน</span></button>
            <button class="nav-sub" data-page="address" data-url="/setting/master/address" onclick="selectPage(this)"><span data-i18n="nav.address">ที่อยู่</span></button>
            <button class="nav-sub" data-page="department" data-url="/setting/master/department" onclick="selectPage(this)"><span data-i18n="nav.department">ฝ่าย / แผนก</span></button>
            <button class="nav-sub" data-page="business-type" data-url="/setting/master/business-type" onclick="selectPage(this)"><span data-i18n="nav.businessType">ประเภทธุรกิจ</span></button>
            <button class="nav-sub" data-page="project-type" data-url="/setting/master/project-type" onclick="selectPage(this)"><span data-i18n="nav.projectType">ประเภทโครงการ</span></button>
            <button class="nav-sub" data-page="document-type" data-url="/setting/master/document-type" onclick="selectPage(this)"><span data-i18n="nav.documentType">ประเภทเอกสาร</span></button>
            <button class="nav-sub" data-page="audit-log" data-url="/setting/master/audit-log" onclick="selectPage(this)"><span data-i18n="nav.auditLog">จัดการ Audit Log</span></button>
          </div>
        </div>
      </div>

    </nav>

    <div class="sidebar-foot">
      <span>© 2026 ConstructQ</span>
      <span class="ver">v1.0</span>
    </div>
  </aside>

  <!-- ============ TOP HEADER (AppShell canonical) ============ -->
  <header class="topbar">
    <button class="org-chip">
      <div class="org-logo"><svg aria-hidden="true"><use href="#tarnas-bow"/></svg></div>
      <div class="org-name" data-i18n="org.name">บริษัท ธาร์ณัส จำกัด</div>
      <svg class="org-chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
    </button>

    <div class="topbar-spacer"></div>

    <div class="topbar-actions">
      <div class="fs-group">
        <button onclick="setFs(this,12)">A-</button>
        <button class="active" onclick="setFs(this,14.5)">A</button>
        <button onclick="setFs(this,16)">A+</button>
      </div>

      <div class="lang-toggle" id="tbLang">
        <button class="active" data-lang="th" onclick="setCkLang(this,'th')" title="ภาษาไทย">
          <svg class="flag-svg" viewBox="0 0 30 20" width="22" height="14">
            <rect x="0" y="0"     width="30" height="3.33" fill="#A51931"/>
            <rect x="0" y="3.33"  width="30" height="3.34" fill="#F4F5F8"/>
            <rect x="0" y="6.67"  width="30" height="6.66" fill="#2D2A4A"/>
            <rect x="0" y="13.33" width="30" height="3.34" fill="#F4F5F8"/>
            <rect x="0" y="16.67" width="30" height="3.33" fill="#A51931"/>
          </svg>
        </button>
        <button data-lang="en" onclick="setCkLang(this,'en')" title="English">
          <svg class="flag-svg" viewBox="0 0 60 40" width="22" height="14">
            <clipPath id="ck-uk-clip"><rect width="60" height="40"/></clipPath>
            <g clip-path="url(#ck-uk-clip)">
              <rect width="60" height="40" fill="#012169"/>
              <path d="M0,0 L60,40 M60,0 L0,40" stroke="#FFFFFF" stroke-width="8"/>
              <path d="M0,0 L60,40 M60,0 L0,40" stroke="#C8102E" stroke-width="4"/>
              <path d="M30,0 V40 M0,20 H60" stroke="#FFFFFF" stroke-width="12"/>
              <path d="M30,0 V40 M0,20 H60" stroke="#C8102E" stroke-width="7"/>
            </g>
          </svg>
        </button>
      </div>

      <button class="icon-btn" title="การแจ้งเตือน">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
        <span class="notif-dot"></span>
      </button>

      <div class="profile-chip">
        <div class="profile-avatar">วศ</div>
        <div class="profile-info">
          <div class="profile-username">วศิน อนันต์</div>
          <div class="profile-role">QC LEAD</div>
        </div>
      </div>
    </div>
  </header>

  <!-- ============ MAIN CONTENT ============ -->
  <main class="content-wrap">
    <div class="breadcrumb-bar" id="breadcrumb">
      <a data-i18n="bc.home">หน้าหลัก</a>
      <span class="crumb-sep">/</span>
      <a data-i18n="nav.mainWork">งานหลัก</a>
      <span class="crumb-sep">/</span>
      <a data-i18n="nav.inspection">ตรวจสอบคุณภาพ</a>
      <span class="crumb-sep">/</span>
      <span class="crumb-current" data-i18n="nav.checklist">จัดการ Checklist</span>
    </div>
    <div id="root"></div>
  </main>
</div>

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

<script>
  /* ============ AppShell helpers (canonical) ============ */
  /* i18n dictionary — keys match data-i18n attrs on sidebar / topbar / breadcrumb */
  const SHELL_I18N = {
    th: {},
    en: {
      "sb.search":"Search...",
      "bc.home":"Home",
      "org.name":"Tarnas Company Limited",
      "nav.overview":"Overview",
      "nav.dashboard":"Dashboard",
      "nav.service":"Service",
      "nav.subscribe":"Subscribe",
      "nav.packages":"Package Management",
      "nav.mainWork":"Main Work",
      "nav.project":"Project / Site",
      "nav.projectMgmt":"Project & Zone Setup",
      "nav.documentMgmt":"Drawing & Doc Management",
      "nav.wbsMgmt":"Work Breakdown Structure",
      "nav.inspection":"Inspection",
      "nav.taskMgmt":"Inspection Schedule",
      "nav.checklist":"Checklist Builder",
      "nav.workflow":"Workflow",
      "nav.ncr":"NCR — Non-Conformance Report",
      "nav.ncrMgmt":"NCR Management",
      "nav.report":"Auto Report Generation",
      "nav.setting":"Setting",
      "nav.me":"Me",
      "nav.profile":"Profile",
      "nav.companyInfo":"Company Info",
      "nav.billing":"Bill Cycle",
      "nav.notification":"Notification",
      "nav.language":"Language",
      "nav.masterData":"Master Data",
      "nav.menu":"Menu",
      "nav.rbac":"Role & Access Control",
      "nav.user":"User",
      "nav.address":"Address",
      "nav.department":"Division / Department",
      "nav.businessType":"Business Type",
      "nav.projectType":"Project Type",
      "nav.documentType":"Document Type",
      "nav.auditLog":"Audit Log Management"
    }
  };
  let currentShellLang = 'th';
  window.__shellOrig = {};
  function snapshotShellI18n(){
    document.querySelectorAll('[data-i18n]').forEach(el=>{
      const k = el.getAttribute('data-i18n');
      if (window.__shellOrig[k] === undefined) window.__shellOrig[k] = el.innerHTML;
    });
    document.querySelectorAll('[data-i18n-placeholder]').forEach(el=>{
      const k = el.getAttribute('data-i18n-placeholder');
      if (window.__shellOrig['ph:'+k] === undefined) window.__shellOrig['ph:'+k] = el.getAttribute('placeholder');
    });
  }
  function applyShellLang(lang){
    currentShellLang = lang;
    document.documentElement.lang = lang;
    document.querySelectorAll('[data-i18n]').forEach(el=>{
      const k = el.getAttribute('data-i18n');
      if (lang === 'th'){
        if (window.__shellOrig[k] !== undefined) el.innerHTML = window.__shellOrig[k];
      } else if (SHELL_I18N.en[k] !== undefined){
        el.innerHTML = SHELL_I18N.en[k];
      }
    });
    document.querySelectorAll('[data-i18n-placeholder]').forEach(el=>{
      const k = el.getAttribute('data-i18n-placeholder');
      if (lang === 'th'){
        if (window.__shellOrig['ph:'+k] !== undefined) el.setAttribute('placeholder', window.__shellOrig['ph:'+k]);
      } else if (SHELL_I18N.en[k] !== undefined){
        el.setAttribute('placeholder', SHELL_I18N.en[k]);
      }
    });
    document.querySelectorAll('#tbLang button').forEach(b=> b.classList.toggle('active', b.dataset.lang === lang));
  
    /* v1.6 Rule 6.C — Cascade */
    window.__shellLang = lang;
    document.documentElement.setAttribute('data-shell-lang', lang);
    if (typeof window.applyPageI18n === 'function'){ try { window.applyPageI18n(lang); } catch(e){} }
    if (typeof window.__setLang === 'function'){ try { window.__setLang(lang); } catch(e){} }
    try { window.dispatchEvent(new CustomEvent('shell:langchange', { detail:{ lang, prev: window.__prevShellLang||'th' } })); window.__prevShellLang = lang; } catch(e){}
}

  function toggleGroup(btn){
    const subs = btn.nextElementSibling;
    const isOpen = btn.classList.contains('open');
    btn.classList.toggle('open', !isOpen);
    if (subs) subs.classList.toggle('open', !isOpen);
  }
  function selectPage(el){
    document.querySelectorAll('.nav-item, .nav-sub').forEach(n=> n.classList.remove('active'));
    el.classList.add('active');
    if (el.classList.contains('nav-sub')){
      const subs = el.parentElement;
      const main = subs.previousElementSibling;
      subs.classList.add('open');
      if (main) main.classList.add('open');
    }
    // Update breadcrumb to reflect clicked menu (re-uses data-i18n keys for lang swap)
    const pageSpan = el.querySelector('[data-i18n]');
    const pageKey = pageSpan?.getAttribute('data-i18n');
    let parentKey = null;
    if (el.classList.contains('nav-sub')){
      const parentSpan = el.parentElement.previousElementSibling?.querySelector('[data-i18n]');
      parentKey = parentSpan?.getAttribute('data-i18n');
    }
    const bc = document.getElementById('breadcrumb');
    if (bc && pageKey){
      const pageThText = window.__shellOrig[pageKey] || pageSpan?.innerText || '';
      const parentThText = parentKey ? (window.__shellOrig[parentKey] || '') : '';
      const sectionLabelEl = el.closest('.nav-section')?.querySelector('.nav-section-label');
      const sectionKey = sectionLabelEl?.getAttribute('data-i18n');
      const sectionThText = sectionKey ? (window.__shellOrig[sectionKey] || sectionLabelEl.innerText) : '';
      let html = `<a data-i18n="bc.home">หน้าหลัก</a>`;
      if (sectionKey){
        html += `<span class="crumb-sep">/</span><a data-i18n="${sectionKey}">${sectionThText}</a>`;
      }
      if (parentKey){
        html += `<span class="crumb-sep">/</span><a data-i18n="${parentKey}">${parentThText}</a>`;
      }
      html += `<span class="crumb-sep">/</span><span class="crumb-current" data-i18n="${pageKey}">${pageThText}</span>`;
      bc.innerHTML = html;
      snapshotShellI18n();
      applyShellLang(currentShellLang);
    }
  }
  function setFs(btn,px){
    document.querySelectorAll('.fs-group button').forEach(b=>b.classList.toggle('active',b===btn));
    document.documentElement.style.fontSize = px+'px';
  }
  // Topbar TH/EN toggle — applies shell language AND bridges to React's setLang for page content
  function setCkLang(btn, lang){
    applyShellLang(lang);
    if (typeof window.__ckSetLang === 'function') window.__ckSetLang(lang);
  }

  document.addEventListener('DOMContentLoaded', ()=>{ snapshotShellI18n(); });
</script>

<!-- CP_TEMPLATES (subset, just zones/wbs/members needed for CK_PROJECTS) -->
<script>
window.CP_TEMPLATES = [
  { id:"office", icon:"office", typeKey:0, nameTh:"อาคารสำนักงาน", nameEn:"Office Building",
    data:{ project:{ code:"CQ-2026-0091", name:"อาคารสำนักงานกลางเมือง / Central Office Building" },
      zones:[{code:"Z-B3",name:"ชั้นใต้ดิน 3 / Basement 3"},{code:"Z-B2",name:"ชั้นใต้ดิน 2 / Basement 2"},{code:"Z-G",name:"ชั้นล็อบบี้ / Ground Lobby"},{code:"Z-5",name:"โซนสำนักงาน A / Office Zone A"},{code:"Z-R",name:"ชั้นดาดฟ้า / Rooftop"}],
      wbs:[{code:"1",name:"งานโครงสร้าง / Structure"},{code:"1.1",name:"งานเสาเข็ม / Piling"},{code:"1.2",name:"งานคอนกรีต / Concrete"},{code:"2",name:"งานสถาปัตยกรรม / Architecture"},{code:"2.1",name:"งานสี / Painting"},{code:"3",name:"งานระบบ / MEP"}],
      members:[{name:"Son Prasertsri",role:0},{name:"Kittisak Chaiwatn",role:1},{name:"Apinya Wongsuk",role:2},{name:"Somchai Rakdee",role:3},{name:"Narong Boonmee",role:4}]
    }},
  { id:"residential", icon:"residential", typeKey:1, nameTh:"อาคารพักอาศัย", nameEn:"Residential",
    data:{ project:{ code:"CQ-2026-0102", name:"เดอะ ริเวอร์ คอนโดมิเนียม / The River Condominium" },
      zones:[{code:"ZR-B",name:"ที่จอดรถ / Parking"},{code:"ZR-AMN",name:"พื้นที่ส่วนกลาง / Amenities"},{code:"ZR-LOW",name:"ห้องพักโซนล่าง / Lower"},{code:"ZR-HIGH",name:"ห้องพักโซนบน / Upper"}],
      wbs:[{code:"1",name:"งานโครงสร้าง / Structure"},{code:"2",name:"งานสถาปัตยกรรม / Architecture"},{code:"2.1",name:"งานตกแต่งภายใน / Interior"},{code:"3",name:"งานสุขาภิบาล / Sanitary"}],
      members:[{name:"Wichai Chinda",role:0},{name:"Pranom Suksai",role:1},{name:"Anchalee Petch",role:2}]
    }},
  { id:"infra", icon:"infra", typeKey:2, nameTh:"โครงสร้างพื้นฐาน", nameEn:"Infrastructure",
    data:{ project:{ code:"CQ-2026-0210", name:"สะพานข้ามแม่น้ำเจ้าพระยา ระยะที่ 2 / Chao Phraya Bridge Phase 2" },
      zones:[{code:"Z-N",name:"ฐานรากฝั่งเหนือ / North Pier"},{code:"Z-S",name:"ฐานรากฝั่งใต้ / South Pier"},{code:"Z-D",name:"ช่วงสะพานหลัก / Main Span"},{code:"Z-A",name:"ทางขึ้น-ลง / Approach"}],
      wbs:[{code:"1",name:"งานสำรวจและฐานราก / Survey & Foundation"},{code:"2",name:"งานตอม่อ / Piers"},{code:"3",name:"งานช่วงสะพาน / Bridge Deck"},{code:"4",name:"งานพื้นผิวจราจร / Pavement"}],
      members:[{name:"Prasert Wong",role:0},{name:"Manoon Suk",role:1},{name:"Suthep Chai",role:2}]
    }},
  { id:"renovation", icon:"renovation", typeKey:3, nameTh:"งานปรับปรุง / Renovation", nameEn:"Renovation",
    data:{ project:{ code:"CQ-2026-0305", name:"ปรับปรุงห้างเซ็นทรัล สาขาลาดพร้าว / Central Ladprao Renovation" },
      zones:[{code:"Z-F1",name:"ชั้น 1 / Floor 1"},{code:"Z-F2",name:"ชั้น 2 / Floor 2"},{code:"Z-FB",name:"ฟู้ดคอร์ท / Food Court"}],
      wbs:[{code:"1",name:"งานรื้อถอน / Demolition"},{code:"2",name:"งานติดตั้งใหม่ / Installation"},{code:"3",name:"งานสี / Painting"}],
      members:[{name:"Niwat Sarakorn",role:0},{name:"Jirayu Wattana",role:1}]
    }},
  { id:"factory", icon:"factory", typeKey:4, nameTh:"โรงงานอุตสาหกรรม", nameEn:"Factory",
    data:{ project:{ code:"CQ-2026-0408", name:"โรงงานอิเล็กทรอนิกส์ EEC / EEC Electronics Factory" },
      zones:[{code:"Z-PROD",name:"พื้นที่ผลิต / Production"},{code:"Z-CR",name:"คลีนรูม / Clean Room"},{code:"Z-WH",name:"คลังสินค้า / Warehouse"},{code:"Z-OF",name:"สำนักงาน / Office"}],
      wbs:[{code:"1",name:"งานโครงสร้างเหล็ก / Steel Structure"},{code:"2",name:"งานพื้น Heavy Duty / Heavy Duty Floor"},{code:"3",name:"ระบบ HVAC / HVAC System"},{code:"4",name:"ระบบดับเพลิง / Fire Protection"}],
      members:[{name:"Chaiya Suntorn",role:0},{name:"Wanida Pholrat",role:1}]
    }}
];

// Roles
window.SUB_ROLES = [
  { id:"pm", nameTh:"Project Manager (PM)", nameEn:"Project Manager" },
  { id:"qcm", nameTh:"QC Manager (QCM)", nameEn:"QC Manager" },
  { id:"inspector", nameTh:"QC Inspector", nameEn:"QC Inspector" },
  { id:"engineer", nameTh:"Site Engineer", nameEn:"Site Engineer" }
];
</script>

<!-- CK i18n -->
<script>
window.CK_I18N = {
  th: {
    pageTitle: "เทมเพลท Checklist",
    pageSub: "ออกแบบฟอร์มตรวจคุณภาพให้ทีมงาน QC ใช้ตรวจหน้างาน",
    crumb: ["Quality Control", "เทมเพลท Checklist"], project: "โครงการ", selectProject: "เลือกโครงการ",
    btnNew: "สร้างเช็คลิสต์ใหม่", btnTemplate: "เทมเพลตเช็คลิสต์", btnImportXlsx: "นำเข้า Excel", btnExportXlsx: "นำออก Excel", btnPreview: "ดูตัวอย่างมือถือ", btnPublish: "เผยแพร่",
    btnSave: "บันทึก", btnDuplicate: "ทำสำเนา", btnDelete: "ลบ", btnArchive: "เก็บถาวร", btnExpandAll: "ขยายทั้งหมด", btnCollapseAll: "ย่อทั้งหมด",
    btnCancel: "ยกเลิก", btnAddSection: "เพิ่มหมวด", btnAddQuestion: "เพิ่มคำถาม",
    btnAddOption: "เพิ่มตัวเลือก", btnRemove: "ลบ",
    sidebar: { title: "รายการเช็คลิสต์", count: (n) => `${n} รายการ`, empty: 'ยังไม่มี Checklist — กด "สร้างเช็คลิสต์ใหม่"' },
    status: { draft: "ฉบับร่าง", published: "เผยแพร่แล้ว", archived: "เก็บถาวร" },
    meta: { name: "ชื่อ Checklist", nameEn: "ชื่อ (อังกฤษ)", wbs: "ผูกกับ WBS", wbsHint: "เลือกงานใน WBS ของโครงการ",
      version: "เวอร์ชัน", assignedRoles: "บทบาทที่ใช้ได้", lastUpdated: "อัปเดตล่าสุด", updatedBy: "โดย",
      stats: { sections: "หมวด", questions: "คำถาม", required: "บังคับ", withPhoto: "ต้องแนบรูป" } },
    section: { titleTh: "ชื่อหมวด (ไทย)", titleEn: "ชื่อหมวด (อังกฤษ)", desc: "คำอธิบายหมวด",
      noQ: "ยังไม่มีคำถาม — กดเลือกประเภทคำถามด้านล่าง" },
    qEdit: { labelTh: "คำถาม (ไทย)", labelEn: "คำถาม (อังกฤษ)", help: "คำอธิบาย/คำใบ้",
      required: "บังคับตอบ", requirePhoto: "ต้องแนบรูปเมื่อตอบ", unit: "หน่วย", options: "ตัวเลือก",
      minPhotos: "จำนวนรูปขั้นต่ำ", placeholder: "พิมพ์ที่นี่", pickType: "เลือกประเภทคำถาม",
      criteriaTitle: "🎯 เกณฑ์การยอมรับ (Acceptance Criteria)",
      criteriaHint: "กำหนดเกณฑ์ให้ระบบตัดสินอัตโนมัติเมื่อ QC Inspector ป้อนคำตอบ",
      operator: "เงื่อนไข",
      opNone: "ไม่กำหนด (ตัดสินโดยผู้ตรวจ)",
      opRange: "อยู่ในช่วง (min ≤ ค่า ≤ max)",
      opGe: "มากกว่าหรือเท่ากับ (≥ min)",
      opLe: "น้อยกว่าหรือเท่ากับ (≤ max)",
      opEq: "เท่ากับค่าที่กำหนด (± tolerance)",
      opInList: "อยู่ในรายการที่กำหนด",
      opManual: "ตัดสินด้วยตนเอง (บังคับ photo + comment)",
      min: "ค่าต่ำสุด (min)", max: "ค่าสูงสุด (max)",
      expected: "ค่าที่คาดหวัง", tolerance: "ค่าเบี่ยงเบน (±)",
      warnBelow: "เตือนเมื่อต่ำกว่า", warnAbove: "เตือนเมื่อสูงกว่า",
      acceptable: "ตัวเลือกที่ผ่าน (คั่นด้วย ,)",
      onFail: "เมื่อไม่ผ่าน", onFailNcr: "🚨 สร้าง NCR อัตโนมัติ",
      onFailFlag: "🚩 ทำเครื่องหมาย (ไม่สร้าง NCR)", onFailNone: "— ไม่ทำอะไร —",
      severity: "ระดับความรุนแรง",
      sevMinor: "🟢 Minor", sevMajor: "🟠 Major", sevCritical: "🔴 Critical",
      criteriaPreview: "ตัวอย่าง:" },
    qTypes: {
      text: { name: "ข้อความสั้น", desc: "ตอบเป็นข้อความ 1 บรรทัด" },
      longtext: { name: "ข้อความยาว", desc: "ตอบแบบหลายบรรทัด" },
      number: { name: "ตัวเลข", desc: "ค่าตัวเลข + หน่วย" },
      radio: { name: "เลือกหนึ่งข้อ", desc: "ใช่ / ไม่ / อื่นๆ" },
      checkbox: { name: "เลือกหลายข้อ", desc: "เลือกได้มากกว่าหนึ่งตัวเลือก" },
      passfail: { name: "ผ่าน / ไม่ผ่าน", desc: "พิจารณาผ่านหรือไม่ผ่าน" },
      photo: { name: "อัปโหลดรูป", desc: "ถ่ายรูปหน้างาน" },
      date: { name: "วันที่", desc: "เลือกวันที่จากปฏิทิน" },
      signature: { name: "ลายเซ็น", desc: "ให้ผู้ตรวจเซ็นรับรอง" },
      color: { name: "ค่าสี", desc: "ระบุรหัสสี เช่น HEX" }
    },
    preview: { title: "ตัวอย่างบนมือถือ", simTitle: "🧪 ทดลองตอบ", simHint: "พิมพ์ค่าเพื่อทดสอบเกณฑ์",
      verdictPass: "✅ ผ่าน", verdictWarn: "⚠️ เตือน", verdictFail: "❌ ไม่ผ่าน", verdictNone: "— ไม่มีเกณฑ์ —",
      reasonBelow: (v,min)=>`ต่ำกว่าค่าต่ำสุด (${v} < ${min})`,
      reasonAbove: (v,max)=>`สูงกว่าค่าสูงสุด (${v} > ${max})`,
      reasonEq: (v,exp,tol)=>`ต่างจาก ${exp} เกินกว่า ±${tol} (คำตอบ: ${v})`,
      reasonInPass: (v)=>`อยู่ในรายการที่ยอมรับ (${v})`,
      reasonNotIn: (v)=>`ไม่อยู่ในรายการที่ยอมรับ (${v})`,
      reasonInRange: `ค่าอยู่ในเกณฑ์`,
      reasonWarnBelow: (v,w)=>`เตือน: ค่า ${v} ต่ำกว่าจุดเตือน ${w}`,
      reasonWarnAbove: (v,w)=>`เตือน: ค่า ${v} สูงกว่าจุดเตือน ${w}`, sub: "หน้าจอที่ผู้ตรวจหน้างานจะเห็น", close: "ปิด",
      passLbl: "ผ่าน", failLbl: "ไม่ผ่าน", yes: "ใช่", no: "ไม่", other: "อื่นๆ",
      addPhoto: "แนบรูป", submit: "บันทึกการตรวจ", progress: (a, b) => `ตอบแล้ว ${a} จาก ${b} ข้อ`,
      commentLabel: "หมายเหตุ / ความคิดเห็น", commentPh: "ระบุรายละเอียดเพิ่มเติม · เหตุผล · หลักฐานสนับสนุน...",
      photoReqLabel: "รูปประกอบ (อย่างน้อย 1 รูป)", photoChooseTh: "ถ่ายภาพ / เลือกรูปจากแกลเลอรี", required: "บังคับ", prev: "ก่อนหน้า", next: "ถัดไป", finish: "บันทึกการตรวจ", stepOf: (a,b)=>`ข้อ ${a}/${b}`, tabQ: (n)=>`${n} ข้อ`, chooseTab: "เลือกหมวด", chooseOpt: "เลือก...", signHere: "แตะเพื่อเซ็น", signClear: "ลบลายเซ็น", ruleTitle: "📏 เกณฑ์การตรวจ", ruleAutoNcr: "ตกเกณฑ์ → เปิด NCR อัตโนมัติ", ruleWarn: "ตกเกณฑ์ → เตือน", sevCritical: "ระดับ: วิกฤต", sevMajor: "ระดับ: สูง", sevMinor: "ระดับ: กลาง" },
    confirm: { delTitle: "ลบ Checklist?", delMsg: "การกระทำนี้ไม่สามารถย้อนกลับได้ คำตอบเดิมยังคงอยู่ในระบบ",
      delConfirm: "ยืนยันลบ", delQTitle: "ลบคำถาม?", delSecTitle: "ลบหมวด?",
      saveTitle: "ยืนยันการบันทึก", saveMsg: "บันทึกข้อมูล Checklist นี้เข้าสู่ระบบ · หลังบันทึกยังแก้ไขได้",
      saveConfirm: "💾 ยืนยันบันทึก",
      publishTitle: "ยืนยันการเผยแพร่", publishMsg: "เผยแพร่ Checklist นี้ให้ใช้งานได้จริงในโครงการ · ยังแก้ไขได้ในภายหลัง",
      publishConfirm: "🚀 ยืนยันเผยแพร่" },
    toast: { created: "สร้าง Checklist ใหม่เรียบร้อย", saved: "บันทึกเรียบร้อย", duplicated: "ทำสำเนาเรียบร้อย", deleted: "ลบเรียบร้อย",
      saved: "บันทึกเรียบร้อย", published: "เผยแพร่ Checklist เรียบร้อย",
      qAdded: "เพิ่มคำถามแล้ว", qDeleted: "ลบคำถามแล้ว", sAdded: "เพิ่มหมวดแล้ว", sDeleted: "ลบหมวดแล้ว",
      tplApplied: (n) => `โหลดเทมเพลต "${n}" สำเร็จ`,
      tplPickFirst: "กรุณาเลือกเทมเพลตด้านซ้าย" },
    tpl: {
      title: "เลือกเทมเพลตเช็คลิสต์",
      sub: "เลือกเทมเพลตตามมาตรฐานสากล/ไทย เพื่อเริ่ม Checklist พร้อมรายการตรวจสำเร็จรูป",
      sections: "หมวด", questions: "รายการ", ref: "มาตรฐานอ้างอิง",
      preview: "ตัวอย่าง", apply: "ใช้เทมเพลตนี้", cancel: "ยกเลิก",
      sevCritical: "วิกฤต", sevHigh: "สูง", sevMedium: "กลาง",
      reqLabel: "บังคับ", photoLabel: "ต้องแนบรูป",
      exportBlank: "นำออกข้อมูลเปล่า", exportWithData: "นำออกพร้อมข้อมูล",
      exportedBlank: (n) => `นำออกไฟล์เปล่า "${n}" แล้ว`,
      exportedFilled: (n) => `นำออกไฟล์พร้อมข้อมูล "${n}" แล้ว`
    },
    qIndex: (i) => `ข้อที่ ${i}`, optionPh: (i) => `ตัวเลือกที่ ${i}`
  },
  en: {
    pageTitle: "Checklist Template",
    pageSub: "Design QC inspection forms for your field team",
    crumb: ["Quality Control", "Checklist Template"], project: "Project", selectProject: "Select a project",
    btnNew: "New Checklist", btnTemplate: "Checklist Template", btnImportXlsx: "Import Excel", btnExportXlsx: "Export Excel", btnPreview: "Mobile Preview", btnPublish: "Publish",
    btnSave: "Save", btnDuplicate: "Duplicate", btnDelete: "Delete", btnArchive: "Archive", btnExpandAll: "Expand all", btnCollapseAll: "Collapse all",
    btnCancel: "Cancel", btnAddSection: "Add Section", btnAddQuestion: "Add Question",
    btnAddOption: "Add option", btnRemove: "Remove",
    sidebar: { title: "Project checklists", count: (n) => `${n} item${n === 1 ? "" : "s"}`, empty: 'No checklists yet — click "New Checklist"' },
    status: { draft: "Draft", published: "Published", archived: "Archived" },
    meta: { name: "Checklist Name", nameEn: "Name (English)", wbs: "Linked WBS", wbsHint: "Pick a WBS item from this project",
      version: "Version", assignedRoles: "Assigned Roles", lastUpdated: "Last updated", updatedBy: "by",
      stats: { sections: "Sections", questions: "Questions", required: "Required", withPhoto: "Photo required" } },
    section: { titleTh: "Section Title (Thai)", titleEn: "Section Title (English)", desc: "Section description",
      noQ: "No questions yet — pick a type below" },
    qEdit: { labelTh: "Question (Thai)", labelEn: "Question (English)", help: "Helper text",
      required: "Required", requirePhoto: "Require photo with answer", unit: "Unit", options: "Options",
      minPhotos: "Min photos", placeholder: "Type here", pickType: "Pick a question type",
      criteriaTitle: "🎯 Acceptance Criteria",
      criteriaHint: "Define criteria so the system can auto-judge inspector answers",
      operator: "Operator",
      opNone: "None (manual judgment)",
      opRange: "Range (min ≤ value ≤ max)",
      opGe: "Greater than or equal (≥ min)",
      opLe: "Less than or equal (≤ max)",
      opEq: "Equal to expected (± tolerance)",
      opInList: "In list of acceptable values",
      opManual: "Manual judgment (require photo + comment)",
      min: "Minimum (min)", max: "Maximum (max)",
      expected: "Expected value", tolerance: "Tolerance (±)",
      warnBelow: "Warn when below", warnAbove: "Warn when above",
      acceptable: "Acceptable options (comma-separated)",
      onFail: "On fail", onFailNcr: "🚨 Auto-create NCR",
      onFailFlag: "🚩 Flag (no NCR)", onFailNone: "— Do nothing —",
      severity: "Severity",
      sevMinor: "🟢 Minor", sevMajor: "🟠 Major", sevCritical: "🔴 Critical",
      criteriaPreview: "Example:" },
    qTypes: {
      text: { name: "Short Text", desc: "Single-line answer" },
      longtext: { name: "Long Text", desc: "Multi-line response" },
      number: { name: "Number", desc: "Numeric value with unit" },
      radio: { name: "Single choice", desc: "Yes / No / Other" },
      checkbox: { name: "Multiple choice", desc: "Pick one or more options" },
      passfail: { name: "Pass / Fail", desc: "Judge pass or fail" },
      photo: { name: "Photo upload", desc: "Take a site photo" },
      date: { name: "Date", desc: "Pick a date" },
      signature: { name: "Signature", desc: "Inspector signs to acknowledge" },
      color: { name: "Color value", desc: "Capture HEX or color code" }
    },
    preview: { title: "Mobile preview", simTitle: "🧪 Try answer", simHint: "Type a value to test criteria",
      verdictPass: "✅ PASS", verdictWarn: "⚠️ WARN", verdictFail: "❌ FAIL", verdictNone: "— No criteria —",
      reasonBelow: (v,min)=>`Below min (${v} < ${min})`,
      reasonAbove: (v,max)=>`Above max (${v} > ${max})`,
      reasonEq: (v,exp,tol)=>`Differs from ${exp} by more than ±${tol} (got ${v})`,
      reasonInPass: (v)=>`In acceptable list (${v})`,
      reasonNotIn: (v)=>`Not in acceptable list (${v})`,
      reasonInRange: `Within acceptable range`,
      reasonWarnBelow: (v,w)=>`Warning: ${v} below warn point ${w}`,
      reasonWarnAbove: (v,w)=>`Warning: ${v} above warn point ${w}`, sub: "How field inspectors will see it", close: "Close",
      passLbl: "Pass", failLbl: "Fail", yes: "Yes", no: "No", other: "Other",
      addPhoto: "Add photo", submit: "Submit inspection", progress: (a, b) => `Answered ${a} of ${b}`,
      commentLabel: "Comment / Note", commentPh: "Add details · reasoning · supporting evidence...",
      photoReqLabel: "Photo (at least 1)", photoChooseTh: "Take a photo / choose from gallery", required: "Required", prev: "Previous", next: "Next", finish: "Save inspection", stepOf: (a,b)=>`Item ${a}/${b}`, tabQ: (n)=>`${n} items`, chooseTab: "Choose section", chooseOpt: "Choose...", signHere: "Tap to sign", signClear: "Clear signature", ruleTitle: "📏 Inspection rule", ruleAutoNcr: "Fail → auto-open NCR", ruleWarn: "Fail → warn only", sevCritical: "Severity: critical", sevMajor: "Severity: major", sevMinor: "Severity: minor" },
    confirm: { delTitle: "Delete Checklist?", delMsg: "This cannot be undone. Submitted answers will remain in the system.",
      delConfirm: "Yes, delete", delQTitle: "Delete question?", delSecTitle: "Delete section?",
      saveTitle: "Confirm Save", saveMsg: "Save this checklist to the system · you can keep editing later.",
      saveConfirm: "💾 Confirm Save",
      publishTitle: "Confirm Publish", publishMsg: "Publish this checklist so it can be used in projects · still editable later.",
      publishConfirm: "🚀 Confirm Publish" },
    toast: { created: "New checklist created", saved: "Saved", duplicated: "Duplicated successfully", deleted: "Deleted",
      saved: "Saved", published: "Checklist published",
      qAdded: "Question added", qDeleted: "Question deleted", sAdded: "Section added", sDeleted: "Section deleted",
      tplApplied: (n) => `Template "${n}" applied`,
      tplPickFirst: "Please pick a template on the left" },
    tpl: {
      title: "Select Checklist Template",
      sub: "Pick a ready-made template aligned to Thai/international standards",
      sections: "Sections", questions: "Questions", ref: "Reference",
      preview: "Preview", apply: "Use this template", cancel: "Cancel",
      sevCritical: "Critical", sevHigh: "High", sevMedium: "Medium",
      reqLabel: "Required", photoLabel: "Photo required",
      exportBlank: "Export Blank", exportWithData: "Export with Data",
      exportedBlank: (n) => `Exported blank "${n}"`,
      exportedFilled: (n) => `Exported "${n}" with data`
    },
    qIndex: (i) => `Q${i}`, optionPh: (i) => `Option ${i}`
  }
};
</script>

<!-- CK data -->
<script>
window.CK_PROJECTS = window.CP_TEMPLATES.map(t => ({
  id: t.id, code: t.data.project.code, name: t.data.project.name, type: t.nameEn,
  zones: t.data.zones, wbs: t.data.wbs, members: t.data.members
}));

window.CK_SEED = [
  { id:"ck-001", projectId:"office", wbsCode:"2.1", nameTh:"ตรวจงานสี", nameEn:"Paint Inspection",
    version:"v1.0", status:"published", updatedAt:"2026-04-10", updatedBy:"Kittisak Chaiwatn",
    assignedRoles:["qcm","inspector"],
    sections:[
      { id:"s1", nameTh:"งานสี", nameEn:"Paint Quality",
        descTh:"ตรวจความสะอาดการเก็บงานของสี ความสวยงาม ทาไม่หนาไม่บาง ไม่มีรอยลูกกลิ้ง",
        descEn:"Inspect paint cleanliness and finishing — smooth, even thickness, no roller marks",
        questions:[
          { id:"q1", type:"number", required:true, requirePhoto:false, labelTh:"ค่าสีที่วัดได้ ΔE ≤ 2.0 ตามมาตรฐาน", labelEn:"Measured colour ΔE ≤ 2.0 per spec", helpTh:"อ่านค่าจากเครื่องวัด ΔE · เกินเกณฑ์เกิด Auto-NCR", helpEn:"Read from ΔE meter · out of range triggers auto-NCR", unit:"ΔE", criteria:{operator:"le",max:2.0,onFail:"auto_ncr",severity:"major"} },
          { id:"q2", type:"color", required:true, labelTh:"สีที่ใช้ทาตรงตาม Color Code ในแบบ", labelEn:"Applied colour matches drawing Color Code", helpTh:"กรอกรหัสสี HEX ที่ทาจริง · เทียบกับ Color Code ในแบบ", helpEn:"Enter actual HEX colour · compare with drawing Color Code" },
          { id:"q3", type:"radio", required:true, requirePhoto:true, labelTh:"สีสม่ำเสมอ ไม่มีรอยลูกกลิ้งและรอยพู่กัน", labelEn:"Paint finish even · free of roller and brush marks",
            options:{ th:["ใช่","ไม่","อื่นๆ"], en:["Yes","No","Other"] } },
          { id:"q4", type:"photo", required:true, minPhotos:2, labelTh:"แนบรูปประกอบการตรวจอย่างน้อย 2 รูป/ตำแหน่ง", labelEn:"Attach at least 2 inspection photos per location", helpTh:"ถ่ายมุมกว้างและมุมเก็บงาน · เป็นหลักฐาน", helpEn:"Wide + detail shots · required as evidence" }
        ] },
      { id:"s2", nameTh:"ความสะอาด", nameEn:"Cleanliness",
        descTh:"ตรวจการเก็บงานสะอาด ไม่มีคราบสี ไม่เปื้อนพื้นและฝ้า",
        descEn:"Check workspace cleanliness — no paint stains on floor/ceiling",
        questions:[
          { id:"q5", type:"passfail", required:true, labelTh:"พื้นที่ส่วนกลางสะอาด ไม่มีคราบสี/เศษวัสดุ", labelEn:"Common areas clean · no paint stains or debris" },
          { id:"q6", type:"signature", required:true, labelTh:"ผู้ตรวจลงลายเซ็นรับรองผลการตรวจ", labelEn:"Inspector must sign to certify inspection result" }
        ] }
    ]
  },
  { id:"ck-002", projectId:"office", wbsCode:"1.2", nameTh:"ตรวจงานคอนกรีต", nameEn:"Concrete Inspection",
    version:"v1.2", status:"published", updatedAt:"2026-03-22", updatedBy:"Apinya Wongsuk",
    assignedRoles:["qcm","inspector","engineer"],
    sections:[
      { id:"s1", nameTh:"ข้อมูลอ้างอิงและเตรียมงาน", nameEn:"Reference & Pre-work",
        descTh:"อ้างอิงแบบก่อสร้าง · Mix Design · เตรียมพื้นที่", descEn:"Drawings · mix design · site preparation",
        questions:[
          { id:"q1", type:"text", required:true, labelTh:"ระบุหมายเลขแบบโครงสร้าง (Structural Drawing) ที่ใช้อ้างอิง", labelEn:"Structural drawing number must be recorded", helpTh:"เช่น STR-2026-04 Rev.C", helpEn:"e.g. STR-2026-04 Rev.C" },
          { id:"q2", type:"date", required:true, labelTh:"บันทึกวันที่ตรวจสอบก่อนเทคอนกรีต", labelEn:"Pre-pour inspection date must be logged", helpTh:"ใช้เป็นหลักฐาน audit trail", helpEn:"For audit trail" },
          { id:"q3", type:"longtext", required:false, labelTh:"บันทึกสภาพหน้างานและอากาศ (Weather/site condition)", labelEn:"Site & weather condition note", helpTh:"ความชื้น · ฝน · อุณหภูมิอากาศ · เหตุผิดปกติ", helpEn:"Humidity · rain · air temp · anomalies" }
        ] },
      { id:"s2", nameTh:"ตรวจรับคอนกรีตจากโรงงาน", nameEn:"Concrete Receiving",
        descTh:"ตรวจ mix design · slump · อุณหภูมิ · การส่งมอบ", descEn:"Mix design · slump · temperature · delivery",
        questions:[
          { id:"q4", type:"text", required:true, labelTh:"ระบุ Delivery Ticket + Mix Design Code ทุกเที่ยว", labelEn:"Delivery ticket + mix design code recorded per truck", helpTh:"เช่น TKT-2026-04-089 · MIX-C240", helpEn:"e.g. TKT-2026-04-089 · MIX-C240" },
          { id:"q5", type:"number", required:true, labelTh:"ค่า Slump ที่วัดได้อยู่ในช่วง 7.5–15 ซม.", labelEn:"Measured slump within 7.5–15 cm range", unit:"cm", helpTh:"เกินช่วง = Auto-NCR · warn 8/14 ซม.", helpEn:"Outside range = auto-NCR · warn at 8/14 cm", criteria:{operator:"range",min:7.5,max:15,warnBelow:8,warnAbove:14,onFail:"auto_ncr",severity:"major"} },
          { id:"q6", type:"number", required:true, labelTh:"อุณหภูมิคอนกรีตขณะเทอยู่ในช่วง 10–32 °C", labelEn:"Concrete temperature at pour within 10–32 °C", unit:"°C", helpTh:"เกินเกณฑ์เกิดปัญหา Cold/Hot pour", helpEn:"Out of range causes cold/hot pour defects", criteria:{operator:"range",min:10,max:32,onFail:"auto_ncr",severity:"minor"} },
          { id:"q7", type:"radio", required:true, labelTh:"เกรดคอนกรีตตรงตาม Spec (fc')", labelEn:"Concrete grade matches specification (f'c)", helpTh:"เลือกเกรดที่รับ · เทียบกับแบบ", helpEn:"Select grade received · verify against drawing", options:{ th:["fc'240 (24 MPa)","fc'280 (28 MPa)","fc'320 (32 MPa)","fc'350 (35 MPa)","อื่นๆ / ไม่ตรง"], en:["fc'240 (24 MPa)","fc'280 (28 MPa)","fc'320 (32 MPa)","fc'350 (35 MPa)","Other / mismatch"] } }
        ] },
      { id:"s3", nameTh:"งานเทและควบคุมคุณภาพ", nameEn:"Pour & QC Control",
        descTh:"การเท · จี้ · การเก็บตัวอย่างทดสอบ", descEn:"Pouring · vibration · sampling",
        questions:[
          { id:"q8", type:"passfail", required:true, requirePhoto:true, labelTh:"การเทคอนกรีตต่อเนื่อง ไม่มี Cold Joint นอกจุดที่กำหนด", labelEn:"Continuous pour · no cold joint outside designed locations", helpTh:"อ้างอิง มยผ. 1101-64 ข้อ 9.5", helpEn:"Ref: มยผ. 1101-64 §9.5", criteria:{operator:"manual",onFail:"auto_ncr",severity:"critical"} },
          { id:"q9", type:"number", required:true, labelTh:"เก็บตัวอย่าง Cube ทุก 50 ลบ.ม. · ปริมาณเทวันนี้ (ลบ.ม.)", labelEn:"Concrete volume poured today (m³) · Cube sample every 50 m³", unit:"m³", helpTh:"ระบุปริมาณ · ใช้คำนวณจำนวน Cube ที่ต้องเก็บ", helpEn:"Enter volume · determines cube samples required" },
          { id:"q10", type:"checkbox", required:true, labelTh:"อุปกรณ์ควบคุมคุณภาพที่ตรวจสอบแล้ว (เลือกที่ครบ)", labelEn:"QC equipment verified (check all present)", helpTh:"ต้องครบก่อนเริ่มเท", helpEn:"Must be complete before pour", options:{ th:["Slump Cone (สะอาด)","Cube Mould 15×15×15","Thermometer สอบเทียบแล้ว","Vibrator (Working)","Cover Meter","Curing Compound / กระสอบชุ่มน้ำ"], en:["Slump Cone (clean)","Cube Mould 15×15×15","Calibrated Thermometer","Vibrator (Working)","Cover Meter","Curing Compound / wet burlap"] } },
          { id:"q11", type:"photo", required:true, minPhotos:3, labelTh:"แนบรูปประกอบการเทคอนกรีต · อย่างน้อย 3 มุม", labelEn:"Attach concrete pour photos · at least 3 angles", helpTh:"ก่อนเท · ระหว่างเท · หลังปรับผิว", helpEn:"Pre-pour · during · post-finish" }
        ] },
      { id:"s4", nameTh:"การบ่มและตรวจหลังถอดแบบ", nameEn:"Curing & Post-form Inspection",
        descTh:"การบ่มคอนกรีต · ผิวหลังถอดแบบ", descEn:"Curing · surface after formwork removal",
        questions:[
          { id:"q12", type:"passfail", required:true, requirePhoto:true, labelTh:"การบ่มคอนกรีต (Curing) ต่อเนื่องไม่น้อยกว่า 7 วัน", labelEn:"Concrete curing continuous · at least 7 days", helpTh:"อ้างอิง มยผ. 1101-64 ข้อ 9.8", helpEn:"Ref: มยผ. 1101-64 §9.8", criteria:{operator:"manual",onFail:"auto_ncr",severity:"major"} },
          { id:"q13", type:"number", required:true, labelTh:"ระดับ (Level) ของ Slab ค่าเบี่ยงเบน ≤ 10 มม. ใน 3 ม.", labelEn:"Slab level deviation ≤ 10 mm per 3 m", unit:"mm", helpTh:"เกินเกณฑ์ = Auto-NCR · warn ที่ 8 มม.", helpEn:"Over threshold = auto-NCR · warn at 8 mm", criteria:{operator:"le",max:10,warnAbove:8,onFail:"auto_ncr",severity:"minor"} }
        ] },
      { id:"s5", nameTh:"การตรวจรับงาน", nameEn:"Acceptance",
        descTh:"ผลตรวจรับและลายเซ็นรับรอง", descEn:"Acceptance verdict & sign-off",
        questions:[
          { id:"q14", type:"radio", required:true, labelTh:"ผลการตรวจรับงานเทคอนกรีตงวดนี้", labelEn:"Acceptance verdict for this pour", helpTh:"เลือก 1 ตัวเลือก", helpEn:"Choose one", options:{ th:["รับงาน (Accept)","รับงานพร้อมข้อสังเกต","ไม่รับงาน (Reject)"], en:["Accept","Accept with remarks","Reject"] }, criteria:{operator:"in_list",acceptable:["รับงาน (Accept)"],onFail:"warn",severity:"minor"} },
          { id:"q15", type:"signature", required:true, labelTh:"ผู้ตรวจลงลายเซ็นรับรองผลการตรวจ (QC Engineer)", labelEn:"QC Engineer must sign to certify inspection result", helpTh:"ลงลายเซ็นเพื่อยืนยัน", helpEn:"Sign to confirm" }
        ] }
    ]
  },
  { id:"ck-003", projectId:"office", wbsCode:"3", nameTh:"ตรวจระบบ MEP", nameEn:"MEP System Inspection",
    version:"v0.3", status:"draft", updatedAt:"2026-04-15", updatedBy:"Son Prasertsri",
    assignedRoles:["qcm","inspector"],
    sections:[
      { id:"s1", nameTh:"ข้อมูลอ้างอิง", nameEn:"Reference",
        descTh:"อ้างอิงแบบ M/E · วันที่ตรวจ", descEn:"M/E drawings · inspection date",
        questions:[
          { id:"q1", type:"text", required:true, labelTh:"ระบุหมายเลขแบบไฟฟ้า/สุขาภิบาล/HVAC ที่ใช้อ้างอิง", labelEn:"Reference M/E/plumbing/HVAC drawing number", helpTh:"เช่น ELE-2026-04 Rev.C · SAN-2026-02 Rev.B", helpEn:"e.g. ELE-2026-04 Rev.C · SAN-2026-02 Rev.B" },
          { id:"q2", type:"date", required:true, labelTh:"บันทึกวันที่ตรวจ Commissioning", labelEn:"Commissioning inspection date must be logged", helpTh:"ใช้เป็น audit trail และประกอบ Handover Doc", helpEn:"Audit trail + handover doc" }
        ] },
      { id:"s2", nameTh:"ระบบไฟฟ้า (วสท. 3001-56)", nameEn:"Electrical (วสท. 3001-56)",
        descTh:"Grounding · Insulation · Panel · Emergency", descEn:"Grounding · insulation · panels · emergency power",
        questions:[
          { id:"q3", type:"number", required:true, requirePhoto:true, labelTh:"ค่าความต้านทานสายดิน (Ground resistance) ≤ 5 Ω", labelEn:"Ground resistance ≤ 5 Ω", unit:"Ω", helpTh:"อ้างอิง วสท. 3001-56 ข้อ 6.1 · เกินเกณฑ์ Auto-NCR", helpEn:"Ref: วสท. 3001-56 §6.1 · over threshold auto-NCR", criteria:{operator:"le",max:5,warnAbove:4,onFail:"auto_ncr",severity:"critical"} },
          { id:"q4", type:"number", required:true, labelTh:"Insulation Test (Megger) ≥ 1 MΩ ทุกวงจร", labelEn:"Insulation resistance (Megger) ≥ 1 MΩ per circuit", unit:"MΩ", helpTh:"อ้างอิง วสท. 3001-56 ข้อ 6.2", helpEn:"Ref: วสท. 3001-56 §6.2", criteria:{operator:"ge",min:1,warnBelow:2,onFail:"auto_ncr",severity:"critical"} },
          { id:"q5", type:"radio", required:true, labelTh:"ระบบไฟฟ้าที่ตรวจ", labelEn:"Power system inspected", helpTh:"เลือกระบบไฟ", helpEn:"Select power system", options:{ th:["1-phase 230V","3-phase 400V","3-phase 400V + N","อื่นๆ"], en:["1-phase 230V","3-phase 400V","3-phase 400V + N","Other"] } },
          { id:"q6", type:"checkbox", required:true, labelTh:"เอกสารและอุปกรณ์ที่ตรวจครบ (เลือกที่ครบ)", labelEn:"Documents & equipment verified (check all present)", helpTh:"ต้องครบก่อนรับมอบ", helpEn:"Must be complete before handover", options:{ th:["Single Line Diagram","Panel Schedule (ป้ายชื่อวงจร)","Emergency Power Test Report","Megger Test Report","Ground Test Report","Load Balancing Report"], en:["Single Line Diagram","Panel Schedule (circuit labels)","Emergency Power Test Report","Megger Test Report","Ground Test Report","Load Balancing Report"] } }
        ] },
      { id:"s3", nameTh:"ระบบประปา (วสท. 4001-59)", nameEn:"Plumbing (วสท. 4001-59)",
        descTh:"Pressure test · P-Trap · Tank leak", descEn:"Pressure test · P-traps · tank leak test",
        questions:[
          { id:"q7", type:"number", required:true, requirePhoto:true, labelTh:"แรงดันทดสอบท่อประปา (Pressure Test) ≥ 1.5× แรงดันใช้งาน", labelEn:"Water pressure test ≥ 1.5× working pressure", unit:"bar", helpTh:"อ้างอิง วสท. 4001-59 ข้อ 5.2 · นาน 2 ชม.", helpEn:"Ref: วสท. 4001-59 §5.2 · 2 hrs", criteria:{operator:"ge",min:6,warnBelow:7,onFail:"auto_ncr",severity:"critical"} },
          { id:"q8", type:"passfail", required:true, labelTh:"P-Trap/U-Trap ทุกจุดระบาย · ป้องกันกลิ่นขึ้น", labelEn:"P/U-Trap installed at every drain · gas seal OK", helpTh:"อ้างอิง วสท. 4001-59 ข้อ 6.5", helpEn:"Ref: วสท. 4001-59 §6.5", criteria:{operator:"manual",onFail:"warn",severity:"minor"} },
          { id:"q9", type:"date", required:true, labelTh:"วันเริ่มทดสอบถังพักน้ำ (Tank Leak Test 24 ชม.)", labelEn:"Water tank leak test (24 hr) start date", helpTh:"ทดสอบไม่รั่วเป็นเวลา 24 ชม.", helpEn:"24 hr no-leak requirement" }
        ] },
      { id:"s4", nameTh:"ระบบปรับอากาศ (ASHRAE/วสท.)", nameEn:"HVAC (ASHRAE/วสท.)",
        descTh:"Duct leakage · Fresh air · Coil color code", descEn:"Duct leakage · fresh air · coil colour code",
        questions:[
          { id:"q10", type:"number", required:true, labelTh:"อัตรารั่วท่อลม (Duct Leakage) ≤ 5%", labelEn:"Duct air leakage rate ≤ 5%", unit:"%", helpTh:"อ้างอิง ASHRAE 90.1 ข้อ 6.4", helpEn:"Ref: ASHRAE 90.1 §6.4", criteria:{operator:"le",max:5,warnAbove:4,onFail:"auto_ncr",severity:"major"} },
          { id:"q11", type:"passfail", required:true, labelTh:"ทดสอบ Balancing ลม/น้ำเย็นค่าเบี่ยงเบน ≤ 10%", labelEn:"Air/chilled-water balancing test · deviation ≤ 10%", helpTh:"อ้างอิง ASHRAE 111", helpEn:"Ref: ASHRAE 111", criteria:{operator:"manual",onFail:"warn",severity:"major"} },
          { id:"q12", type:"color", required:false, labelTh:"สีท่อทำระบบ (Colour Code) ตรงตามมาตรฐาน", labelEn:"Pipe colour code matches standard", helpTh:"กรอก HEX สีที่ใช้ · เทียบกับมาตรฐาน", helpEn:"Enter HEX of applied colour · verify against standard" }
        ] },
      { id:"s5", nameTh:"ระบบดับเพลิง (NFPA 13/วสท. 3003)", nameEn:"Fire Protection (NFPA 13/วสท. 3003)",
        descTh:"Sprinkler · Fire alarm · Emergency route", descEn:"Sprinkler · fire alarm · emergency route",
        questions:[
          { id:"q13", type:"passfail", required:true, requirePhoto:true, labelTh:"ระบบสัญญาณแจ้งเหตุเพลิงไหม้ (Fire Alarm) ทดสอบและใช้งานได้", labelEn:"Fire alarm system tested · functional", helpTh:"อ้างอิง NFPA 72 · ทดสอบทุกโซน", helpEn:"Ref: NFPA 72 · test every zone", criteria:{operator:"manual",onFail:"auto_ncr",severity:"critical"} },
          { id:"q14", type:"photo", required:true, minPhotos:2, labelTh:"แนบรูปตำแหน่งถังดับเพลิงและป้ายทางหนีไฟ · อย่างน้อย 2 รูป", labelEn:"Attach photos of fire extinguisher & exit signage · at least 2", helpTh:"ต้องเห็นเลข floor + ป้ายสว่างชัด", helpEn:"Must show floor no. + lit exit sign" }
        ] },
      { id:"s6", nameTh:"การส่งมอบและรับรอง", nameEn:"Handover & Sign-off",
        descTh:"บันทึกข้อสังเกต · ลายเซ็นวิศวกร", descEn:"Remarks · engineer sign-off",
        questions:[
          { id:"q15", type:"longtext", required:false, labelTh:"บันทึกข้อสังเกต NCR ที่ยังค้าง (ถ้ามี)", labelEn:"Log outstanding NCR items (if any)", helpTh:"อธิบายละเอียด · จะติดตามใน NCR Management", helpEn:"Detail description · tracked in NCR Management" },
          { id:"q16", type:"signature", required:true, labelTh:"ผู้ตรวจ MEP Engineer ลงลายเซ็นรับรองผลการตรวจ", labelEn:"MEP Engineer must sign to certify inspection result", helpTh:"ลงลายเซ็นเพื่อยืนยัน commissioning", helpEn:"Sign to confirm commissioning" }
        ] }
    ]
  }
];

window.CK_TEMPLATES = [
  { id: "ck-tpl-structure", icon: "🏗️", nameTh: "โครงสร้าง (มยผ.)", nameEn: "Structure (มยผ.)",
    descTh: "งานเตรียมพื้นที่ · เหล็กเสริม · แบบหล่อ · เทคอนกรีต · โครงสร้างเหล็ก ตามมาตรฐาน มยผ.",
    descEn: "Foundation · rebar · formwork · concrete pour · steel structure (Thai standard)",
    refStd: "มยผ. 1101-64 · มยผ. 1501-51",
    sections: [
      { id: "s1", nameTh: "งานเตรียมพื้นที่และฐานราก", nameEn: "Section A",
        descTh: "หมวด A · 5 รายการ", descEn: "Section A · 5 items",
        questions: [
          { id: "q1-1", type: "passfail", required: true, requirePhoto: false, labelTh: "การขุดดินถูกต้องตามแบบ ระดับ และขอบเขต", labelEn: "การขุดดินถูกต้องตามแบบ ระดับ และขอบเขต", helpTh: "[S-A01] อ้างอิง: มยผ. 1501-51 ข้อ 4.1 · ระดับ: สูง", helpEn: "[S-A01] อ้างอิง: มยผ. 1501-51 ข้อ 4.1 · ระดับ: สูง", _code: "S-A01", _sev: "สูง" },
          { id: "q1-2", type: "passfail", required: true, requirePhoto: true, labelTh: "ความลึกฐานรากถึงชั้นดินที่มีกำลังรับน้ำหนักพอเพียง", labelEn: "ความลึกฐานรากถึงชั้นดินที่มีกำลังรับน้ำหนักพอเพียง", helpTh: "[S-A02] อ้างอิง: มยผ. 1501-51 ข้อ 4.3 · ระดับ: วิกฤต", helpEn: "[S-A02] อ้างอิง: มยผ. 1501-51 ข้อ 4.3 · ระดับ: วิกฤต", _code: "S-A02", _sev: "วิกฤต" },
          { id: "q1-3", type: "passfail", required: true, requirePhoto: true, labelTh: "การทดสอบกำลังรับน้ำหนักดิน (Bearing Capacity Test) ทำแล้ว", labelEn: "การทดสอบกำลังรับน้ำหนักดิน (Bearing Capacity Test) ทำแล้ว", helpTh: "[S-A03] อ้างอิง: มยผ. 1501-51 ข้อ 5.1 · ระดับ: วิกฤต", helpEn: "[S-A03] อ้างอิง: มยผ. 1501-51 ข้อ 5.1 · ระดับ: วิกฤต", _code: "S-A03", _sev: "วิกฤต" },
          { id: "q1-4", type: "passfail", required: false, requirePhoto: false, labelTh: "ระบบระบายน้ำรอบฐานรากเพียงพอ", labelEn: "ระบบระบายน้ำรอบฐานรากเพียงพอ", helpTh: "[S-A04] อ้างอิง: มยผ. 1501-51 ข้อ 4.5 · ระดับ: กลาง", helpEn: "[S-A04] อ้างอิง: มยผ. 1501-51 ข้อ 4.5 · ระดับ: กลาง", _code: "S-A04", _sev: "กลาง" },
          { id: "q1-5", type: "passfail", required: true, requirePhoto: false, labelTh: "ชั้นหินคลุก (Blinding Concrete) ความหนาไม่น้อยกว่า 5 ซม.", labelEn: "ชั้นหินคลุก (Blinding Concrete) ความหนาไม่น้อยกว่า 5 ซม.", helpTh: "[S-A05] อ้างอิง: มยผ. 1101-64 ข้อ 6.1 · ระดับ: สูง", helpEn: "[S-A05] อ้างอิง: มยผ. 1101-64 ข้อ 6.1 · ระดับ: สูง", _code: "S-A05", _sev: "สูง" }
        ] },
      { id: "s2", nameTh: "งานเหล็กเสริมคอนกรีต", nameEn: "Section B",
        descTh: "หมวด B · 8 รายการ", descEn: "Section B · 8 items",
        questions: [
          { id: "q2-1", type: "passfail", required: true, requirePhoto: true, labelTh: "ขนาดและชนิดเหล็กตรงตามแบบ (DB/RB) ทุกตำแหน่ง", labelEn: "ขนาดและชนิดเหล็กตรงตามแบบ (DB/RB) ทุกตำแหน่ง", helpTh: "[S-B01] อ้างอิง: มยผ. 1101-64 ข้อ 7.2 · ระดับ: วิกฤต", helpEn: "[S-B01] อ้างอิง: มยผ. 1101-64 ข้อ 7.2 · ระดับ: วิกฤต", _code: "S-B01", _sev: "วิกฤต" },
          { id: "q2-2", type: "passfail", required: true, requirePhoto: true, labelTh: "ระยะห่างเหล็กเสริมตามแนวนอนและแนวตั้ง ±5 มม.", labelEn: "ระยะห่างเหล็กเสริมตามแนวนอนและแนวตั้ง ±5 มม.", helpTh: "[S-B02] อ้างอิง: มยผ. 1101-64 ข้อ 7.3 · ระดับ: วิกฤต", helpEn: "[S-B02] อ้างอิง: มยผ. 1101-64 ข้อ 7.3 · ระดับ: วิกฤต", _code: "S-B02", _sev: "วิกฤต" },
          { id: "q2-3", type: "passfail", required: true, requirePhoto: true, labelTh: "ระยะ Cover Concrete ไม่น้อยกว่าที่กำหนด (ฐาน≥75, เสา≥40, คาน≥40 มม.)", labelEn: "ระยะ Cover Concrete ไม่น้อยกว่าที่กำหนด (ฐาน≥75, เสา≥40, คาน≥40 มม.)", helpTh: "[S-B03] อ้างอิง: มยผ. 1101-64 ข้อ 7.4 · ระดับ: วิกฤต", helpEn: "[S-B03] อ้างอิง: มยผ. 1101-64 ข้อ 7.4 · ระดับ: วิกฤต", _code: "S-B03", _sev: "วิกฤต" },
          { id: "q2-4", type: "passfail", required: true, requirePhoto: false, labelTh: "การต่อทาบเหล็กถูกต้อง ความยาว Lap Splice ≥ 40d", labelEn: "การต่อทาบเหล็กถูกต้อง ความยาว Lap Splice ≥ 40d", helpTh: "[S-B04] อ้างอิง: มยผ. 1101-64 ข้อ 7.6 · ระดับ: สูง", helpEn: "[S-B04] อ้างอิง: มยผ. 1101-64 ข้อ 7.6 · ระดับ: สูง", _code: "S-B04", _sev: "สูง" },
          { id: "q2-5", type: "passfail", required: true, requirePhoto: false, labelTh: "ปลอกเหล็ก (Stirrup/Hoop) ระยะห่างและรูปแบบถูกต้อง", labelEn: "ปลอกเหล็ก (Stirrup/Hoop) ระยะห่างและรูปแบบถูกต้อง", helpTh: "[S-B05] อ้างอิง: มยผ. 1101-64 ข้อ 7.5 · ระดับ: สูง", helpEn: "[S-B05] อ้างอิง: มยผ. 1101-64 ข้อ 7.5 · ระดับ: สูง", _code: "S-B05", _sev: "สูง" },
          { id: "q2-6", type: "passfail", required: false, requirePhoto: false, labelTh: "เหล็กเสริมสะอาด ไม่มีสนิมหลุดร่อน น้ำมัน หรือสิ่งปนเปื้อน", labelEn: "เหล็กเสริมสะอาด ไม่มีสนิมหลุดร่อน น้ำมัน หรือสิ่งปนเปื้อน", helpTh: "[S-B06] อ้างอิง: มยผ. 1101-64 ข้อ 7.1 · ระดับ: กลาง", helpEn: "[S-B06] อ้างอิง: มยผ. 1101-64 ข้อ 7.1 · ระดับ: กลาง", _code: "S-B06", _sev: "กลาง" },
          { id: "q2-7", type: "passfail", required: true, requirePhoto: false, labelTh: "การจัดวางและยึดเหล็กก่อนเทคอนกรีตมั่นคง ไม่เคลื่อนตัว", labelEn: "การจัดวางและยึดเหล็กก่อนเทคอนกรีตมั่นคง ไม่เคลื่อนตัว", helpTh: "[S-B07] อ้างอิง: มยผ. 1101-64 ข้อ 7.7 · ระดับ: สูง", helpEn: "[S-B07] อ้างอิง: มยผ. 1101-64 ข้อ 7.7 · ระดับ: สูง", _code: "S-B07", _sev: "สูง" },
          { id: "q2-8", type: "passfail", required: true, requirePhoto: false, labelTh: "ตรวจสอบใบรับรองคุณสมบัติเหล็ก (Mill Certificate) ครบถ้วน", labelEn: "ตรวจสอบใบรับรองคุณสมบัติเหล็ก (Mill Certificate) ครบถ้วน", helpTh: "[S-B08] อ้างอิง: มอก. 24-2548 · ระดับ: สูง", helpEn: "[S-B08] อ้างอิง: มอก. 24-2548 · ระดับ: สูง", _code: "S-B08", _sev: "สูง" }
        ] },
      { id: "s3", nameTh: "งานแบบหล่อ (Formwork)", nameEn: "Section C",
        descTh: "หมวด C · 4 รายการ", descEn: "Section C · 4 items",
        questions: [
          { id: "q3-1", type: "passfail", required: true, requirePhoto: true, labelTh: "แบบหล่อมั่นคง รับน้ำหนักคอนกรีตสดได้ ไม่โก่งงอ", labelEn: "แบบหล่อมั่นคง รับน้ำหนักคอนกรีตสดได้ ไม่โก่งงอ", helpTh: "[S-C01] อ้างอิง: มยผ. 1101-64 ข้อ 8.1 · ระดับ: วิกฤต", helpEn: "[S-C01] อ้างอิง: มยผ. 1101-64 ข้อ 8.1 · ระดับ: วิกฤต", _code: "S-C01", _sev: "วิกฤต" },
          { id: "q3-2", type: "passfail", required: true, requirePhoto: false, labelTh: "รอยต่อแบบหล่อแน่น ไม่รั่วซึม ทาน้ำมันแยกแบบแล้ว", labelEn: "รอยต่อแบบหล่อแน่น ไม่รั่วซึม ทาน้ำมันแยกแบบแล้ว", helpTh: "[S-C02] อ้างอิง: มยผ. 1101-64 ข้อ 8.2 · ระดับ: สูง", helpEn: "[S-C02] อ้างอิง: มยผ. 1101-64 ข้อ 8.2 · ระดับ: สูง", _code: "S-C02", _sev: "สูง" },
          { id: "q3-3", type: "passfail", required: true, requirePhoto: true, labelTh: "ค้ำยัน (Shoring/Reshoring) ถูกต้องตามการออกแบบ", labelEn: "ค้ำยัน (Shoring/Reshoring) ถูกต้องตามการออกแบบ", helpTh: "[S-C03] อ้างอิง: มยผ. 1101-64 ข้อ 8.3 · ระดับ: วิกฤต", helpEn: "[S-C03] อ้างอิง: มยผ. 1101-64 ข้อ 8.3 · ระดับ: วิกฤต", _code: "S-C03", _sev: "วิกฤต" },
          { id: "q3-4", type: "passfail", required: true, requirePhoto: false, labelTh: "ระดับและแนวเส้นตรงของแบบหล่อตรงตามแบบ ค่าเบี่ยงเบน ≤ 5 มม.", labelEn: "ระดับและแนวเส้นตรงของแบบหล่อตรงตามแบบ ค่าเบี่ยงเบน ≤ 5 มม.", helpTh: "[S-C04] อ้างอิง: มยผ. 1101-64 ข้อ 8.4 · ระดับ: สูง", helpEn: "[S-C04] อ้างอิง: มยผ. 1101-64 ข้อ 8.4 · ระดับ: สูง", _code: "S-C04", _sev: "สูง" }
        ] },
      { id: "s4", nameTh: "งานเทคอนกรีต", nameEn: "Section D",
        descTh: "หมวด D · 7 รายการ", descEn: "Section D · 7 items",
        questions: [
          { id: "q4-1", type: "passfail", required: true, requirePhoto: true, labelTh: "Slump Test ทำทุก 50 ลบ.ม. ค่า Slump ตามแบบ (±25 มม.)", labelEn: "Slump Test ทำทุก 50 ลบ.ม. ค่า Slump ตามแบบ (±25 มม.)", helpTh: "[S-D01] อ้างอิง: มยผ. 1101-64 ข้อ 9.2 · ระดับ: วิกฤต", helpEn: "[S-D01] อ้างอิง: มยผ. 1101-64 ข้อ 9.2 · ระดับ: วิกฤต", _code: "S-D01", _sev: "วิกฤต" },
          { id: "q4-2", type: "passfail", required: true, requirePhoto: true, labelTh: "ทดสอบกำลังอัดคอนกรีต (Cube Test 3+3 ตัวอย่าง/งวด) f'c ≥ ที่กำหนด", labelEn: "ทดสอบกำลังอัดคอนกรีต (Cube Test 3+3 ตัวอย่าง/งวด) f'c ≥ ที่กำหนด", helpTh: "[S-D02] อ้างอิง: มยผ. 1101-64 ข้อ 9.3 · ระดับ: วิกฤต", helpEn: "[S-D02] อ้างอิง: มยผ. 1101-64 ข้อ 9.3 · ระดับ: วิกฤต", _code: "S-D02", _sev: "วิกฤต" },
          { id: "q4-3", type: "passfail", required: true, requirePhoto: true, labelTh: "การเทคอนกรีตต่อเนื่อง ไม่มี Cold Joint ในตำแหน่งที่ไม่กำหนด", labelEn: "การเทคอนกรีตต่อเนื่อง ไม่มี Cold Joint ในตำแหน่งที่ไม่กำหนด", helpTh: "[S-D03] อ้างอิง: มยผ. 1101-64 ข้อ 9.5 · ระดับ: วิกฤต", helpEn: "[S-D03] อ้างอิง: มยผ. 1101-64 ข้อ 9.5 · ระดับ: วิกฤต", _code: "S-D03", _sev: "วิกฤต" },
          { id: "q4-4", type: "passfail", required: true, requirePhoto: false, labelTh: "การจี้คอนกรีต (Vibration) ทั่วถึง ไม่ Over-vibrate", labelEn: "การจี้คอนกรีต (Vibration) ทั่วถึง ไม่ Over-vibrate", helpTh: "[S-D04] อ้างอิง: มยผ. 1101-64 ข้อ 9.6 · ระดับ: สูง", helpEn: "[S-D04] อ้างอิง: มยผ. 1101-64 ข้อ 9.6 · ระดับ: สูง", _code: "S-D04", _sev: "สูง" },
          { id: "q4-5", type: "passfail", required: true, requirePhoto: false, labelTh: "การบ่มคอนกรีต (Curing) ไม่น้อยกว่า 7 วัน", labelEn: "การบ่มคอนกรีต (Curing) ไม่น้อยกว่า 7 วัน", helpTh: "[S-D05] อ้างอิง: มยผ. 1101-64 ข้อ 9.8 · ระดับ: สูง", helpEn: "[S-D05] อ้างอิง: มยผ. 1101-64 ข้อ 9.8 · ระดับ: สูง", _code: "S-D05", _sev: "สูง" },
          { id: "q4-6", type: "passfail", required: true, requirePhoto: false, labelTh: "ผิวคอนกรีตหลังถอดแบบ ไม่มี Honeycomb เกินเกณฑ์", labelEn: "ผิวคอนกรีตหลังถอดแบบ ไม่มี Honeycomb เกินเกณฑ์", helpTh: "[S-D06] อ้างอิง: มยผ. 1101-64 ข้อ 9.9 · ระดับ: สูง", helpEn: "[S-D06] อ้างอิง: มยผ. 1101-64 ข้อ 9.9 · ระดับ: สูง", _code: "S-D06", _sev: "สูง" },
          { id: "q4-7", type: "passfail", required: false, requirePhoto: false, labelTh: "ระดับ (Level) ของ Slab ค่าเบี่ยงเบน ≤ 10 มม. ใน 3 ม.", labelEn: "ระดับ (Level) ของ Slab ค่าเบี่ยงเบน ≤ 10 มม. ใน 3 ม.", helpTh: "[S-D07] อ้างอิง: มยผ. 1101-64 ข้อ 9.10 · ระดับ: กลาง", helpEn: "[S-D07] อ้างอิง: มยผ. 1101-64 ข้อ 9.10 · ระดับ: กลาง", _code: "S-D07", _sev: "กลาง" }
        ] },
      { id: "s5", nameTh: "งานโครงสร้างเหล็ก (ถ้ามี)", nameEn: "Section E",
        descTh: "หมวด E · 4 รายการ", descEn: "Section E · 4 items",
        questions: [
          { id: "q5-1", type: "passfail", required: true, requirePhoto: true, labelTh: "ขนาดและเกรดเหล็กโครงสร้างตรงตามแบบ (SS400/SM490)", labelEn: "ขนาดและเกรดเหล็กโครงสร้างตรงตามแบบ (SS400/SM490)", helpTh: "[S-E01] อ้างอิง: มยผ. 1301-51 ข้อ 3.1 · ระดับ: วิกฤต", helpEn: "[S-E01] อ้างอิง: มยผ. 1301-51 ข้อ 3.1 · ระดับ: วิกฤต", _code: "S-E01", _sev: "วิกฤต" },
          { id: "q5-2", type: "passfail", required: true, requirePhoto: true, labelTh: "งานเชื่อมถูกต้อง ไม่มีรอยแตก/รูพรุน ทดสอบ UT/MT แล้ว", labelEn: "งานเชื่อมถูกต้อง ไม่มีรอยแตก/รูพรุน ทดสอบ UT/MT แล้ว", helpTh: "[S-E02] อ้างอิง: มยผ. 1301-51 ข้อ 7.2 · ระดับ: วิกฤต", helpEn: "[S-E02] อ้างอิง: มยผ. 1301-51 ข้อ 7.2 · ระดับ: วิกฤต", _code: "S-E02", _sev: "วิกฤต" },
          { id: "q5-3", type: "passfail", required: true, requirePhoto: false, labelTh: "น็อตและสลักเกลียวขันแน่นตามแรงบิดที่กำหนด", labelEn: "น็อตและสลักเกลียวขันแน่นตามแรงบิดที่กำหนด", helpTh: "[S-E03] อ้างอิง: มยผ. 1301-51 ข้อ 6.3 · ระดับ: สูง", helpEn: "[S-E03] อ้างอิง: มยผ. 1301-51 ข้อ 6.3 · ระดับ: สูง", _code: "S-E03", _sev: "สูง" },
          { id: "q5-4", type: "passfail", required: false, requirePhoto: false, labelTh: "การทาสีกันสนิมครบทุกพื้นผิว DFT ≥ 80 ไมครอน", labelEn: "การทาสีกันสนิมครบทุกพื้นผิว DFT ≥ 80 ไมครอน", helpTh: "[S-E04] อ้างอิง: มยผ. 1301-51 ข้อ 9.1 · ระดับ: กลาง", helpEn: "[S-E04] อ้างอิง: มยผ. 1301-51 ข้อ 9.1 · ระดับ: กลาง", _code: "S-E04", _sev: "กลาง" }
        ] },
      { id: "s6", nameTh: "การตรวจรับงานโครงสร้าง", nameEn: "Section F",
        descTh: "หมวด F · 3 รายการ", descEn: "Section F · 3 items",
        questions: [
          { id: "q6-1", type: "passfail", required: true, requirePhoto: false, labelTh: "As-built Drawing อัปเดตครบถ้วนทุก Phase", labelEn: "As-built Drawing อัปเดตครบถ้วนทุก Phase", helpTh: "[S-F01] อ้างอิง: มยผ. ทั่วไป · ระดับ: สูง", helpEn: "[S-F01] อ้างอิง: มยผ. ทั่วไป · ระดับ: สูง", _code: "S-F01", _sev: "สูง" },
          { id: "q6-2", type: "passfail", required: true, requirePhoto: false, labelTh: "ผลทดสอบทั้งหมดรวบรวมและส่งมอบให้เจ้าของโครงการ", labelEn: "ผลทดสอบทั้งหมดรวบรวมและส่งมอบให้เจ้าของโครงการ", helpTh: "[S-F02] อ้างอิง: มยผ. ทั่วไป · ระดับ: สูง", helpEn: "[S-F02] อ้างอิง: มยผ. ทั่วไป · ระดับ: สูง", _code: "S-F02", _sev: "สูง" },
          { id: "q6-3", type: "passfail", required: true, requirePhoto: true, labelTh: "ไม่มี NCR ที่ยังค้างอยู่ก่อนรับงาน Phase ถัดไป", labelEn: "ไม่มี NCR ที่ยังค้างอยู่ก่อนรับงาน Phase ถัดไป", helpTh: "[S-F03] อ้างอิง: มยผ. ทั่วไป · ระดับ: วิกฤต", helpEn: "[S-F03] อ้างอิง: มยผ. ทั่วไป · ระดับ: วิกฤต", _code: "S-F03", _sev: "วิกฤต" }
        ] }
    ]
  },
  { id: "ck-tpl-mep", icon: "⚡", nameTh: "งาน MEP (วสท.)", nameEn: "MEP (วสท.)",
    descTh: "ระบบไฟฟ้า · ประปา · ปรับอากาศ · ดับเพลิง ตามมาตรฐาน วสท.",
    descEn: "Electrical · plumbing · HVAC · fire protection (Engineering Institute of Thailand)",
    refStd: "วสท. 3001-56 · วสท. 4001-59 · ASHRAE · NFPA 13",
    sections: [
      { id: "s1", nameTh: "ระบบไฟฟ้า (วสท. 3001-56)", nameEn: "Section A",
        descTh: "หมวด A · 8 รายการ", descEn: "Section A · 8 items",
        questions: [
          { id: "q1-1", type: "passfail", required: true, requirePhoto: true, labelTh: "ขนาดสายไฟฟ้าถูกต้องตามแบบ ใช้ THW/NYY มาตรฐาน มอก.", labelEn: "ขนาดสายไฟฟ้าถูกต้องตามแบบ ใช้ THW/NYY มาตรฐาน มอก.", helpTh: "[M-A01] อ้างอิง: วสท. 3001-56 ข้อ 4.1 · ระดับ: วิกฤต", helpEn: "[M-A01] อ้างอิง: วสท. 3001-56 ข้อ 4.1 · ระดับ: วิกฤต", _code: "M-A01", _sev: "วิกฤต" },
          { id: "q1-2", type: "passfail", required: true, requirePhoto: false, labelTh: "การเดินสายในท่อ (Conduit) ครบถ้วน ไม่มีรอยต่อในท่อ", labelEn: "การเดินสายในท่อ (Conduit) ครบถ้วน ไม่มีรอยต่อในท่อ", helpTh: "[M-A02] อ้างอิง: วสท. 3001-56 ข้อ 4.3 · ระดับ: สูง", helpEn: "[M-A02] อ้างอิง: วสท. 3001-56 ข้อ 4.3 · ระดับ: สูง", _code: "M-A02", _sev: "สูง" },
          { id: "q1-3", type: "passfail", required: true, requirePhoto: true, labelTh: "ขนาด Breaker/Fuse ถูกต้องตามการคำนวณ ป้องกันกระแสเกิน", labelEn: "ขนาด Breaker/Fuse ถูกต้องตามการคำนวณ ป้องกันกระแสเกิน", helpTh: "[M-A03] อ้างอิง: วสท. 3001-56 ข้อ 5.2 · ระดับ: วิกฤต", helpEn: "[M-A03] อ้างอิง: วสท. 3001-56 ข้อ 5.2 · ระดับ: วิกฤต", _code: "M-A03", _sev: "วิกฤต" },
          { id: "q1-4", type: "passfail", required: true, requirePhoto: true, labelTh: "ระบบสายดิน (Grounding) ค่าความต้านทาน ≤ 5 Ω ทดสอบแล้ว", labelEn: "ระบบสายดิน (Grounding) ค่าความต้านทาน ≤ 5 Ω ทดสอบแล้ว", helpTh: "[M-A04] อ้างอิง: วสท. 3001-56 ข้อ 6.1 · ระดับ: วิกฤต", helpEn: "[M-A04] อ้างอิง: วสท. 3001-56 ข้อ 6.1 · ระดับ: วิกฤต", _code: "M-A04", _sev: "วิกฤต" },
          { id: "q1-5", type: "passfail", required: true, requirePhoto: true, labelTh: "Insulation Test (Megger Test) ≥ 1 MΩ ทุกวงจร", labelEn: "Insulation Test (Megger Test) ≥ 1 MΩ ทุกวงจร", helpTh: "[M-A05] อ้างอิง: วสท. 3001-56 ข้อ 6.2 · ระดับ: วิกฤต", helpEn: "[M-A05] อ้างอิง: วสท. 3001-56 ข้อ 6.2 · ระดับ: วิกฤต", _code: "M-A05", _sev: "วิกฤต" },
          { id: "q1-6", type: "passfail", required: false, requirePhoto: false, labelTh: "ตำแหน่งเต้ารับ สวิตช์ ระดับความสูงตามมาตรฐาน (30/120 ซม.)", labelEn: "ตำแหน่งเต้ารับ สวิตช์ ระดับความสูงตามมาตรฐาน (30/120 ซม.)", helpTh: "[M-A06] อ้างอิง: วสท. 3001-56 ข้อ 4.8 · ระดับ: กลาง", helpEn: "[M-A06] อ้างอิง: วสท. 3001-56 ข้อ 4.8 · ระดับ: กลาง", _code: "M-A06", _sev: "กลาง" },
          { id: "q1-7", type: "passfail", required: false, requirePhoto: false, labelTh: "ป้ายชื่อวงจรใน MDB/DB ครบถ้วน ชัดเจน", labelEn: "ป้ายชื่อวงจรใน MDB/DB ครบถ้วน ชัดเจน", helpTh: "[M-A07] อ้างอิง: วสท. 3001-56 ข้อ 7.1 · ระดับ: กลาง", helpEn: "[M-A07] อ้างอิง: วสท. 3001-56 ข้อ 7.1 · ระดับ: กลาง", _code: "M-A07", _sev: "กลาง" },
          { id: "q1-8", type: "passfail", required: true, requirePhoto: false, labelTh: "ระบบฉุกเฉิน (Emergency Power) ทดสอบ Changeover แล้ว", labelEn: "ระบบฉุกเฉิน (Emergency Power) ทดสอบ Changeover แล้ว", helpTh: "[M-A08] อ้างอิง: วสท. 3001-56 ข้อ 8.1 · ระดับ: สูง", helpEn: "[M-A08] อ้างอิง: วสท. 3001-56 ข้อ 8.1 · ระดับ: สูง", _code: "M-A08", _sev: "สูง" }
        ] },
      { id: "s2", nameTh: "ระบบประปาและสุขาภิบาล (วสท. 4001-59)", nameEn: "Section B",
        descTh: "หมวด B · 6 รายการ", descEn: "Section B · 6 items",
        questions: [
          { id: "q2-1", type: "passfail", required: true, requirePhoto: false, labelTh: "ขนาดท่อน้ำประปาถูกต้อง วัสดุ CPVC/PPR ตามมาตรฐาน", labelEn: "ขนาดท่อน้ำประปาถูกต้อง วัสดุ CPVC/PPR ตามมาตรฐาน", helpTh: "[M-B01] อ้างอิง: วสท. 4001-59 ข้อ 3.1 · ระดับ: สูง", helpEn: "[M-B01] อ้างอิง: วสท. 4001-59 ข้อ 3.1 · ระดับ: สูง", _code: "M-B01", _sev: "สูง" },
          { id: "q2-2", type: "passfail", required: true, requirePhoto: true, labelTh: "การทดสอบแรงดันน้ำ (Pressure Test) ≥ 1.5 เท่าของแรงดันใช้งาน นาน 2 ชม.", labelEn: "การทดสอบแรงดันน้ำ (Pressure Test) ≥ 1.5 เท่าของแรงดันใช้งาน นาน 2 ชม.", helpTh: "[M-B02] อ้างอิง: วสท. 4001-59 ข้อ 5.2 · ระดับ: วิกฤต", helpEn: "[M-B02] อ้างอิง: วสท. 4001-59 ข้อ 5.2 · ระดับ: วิกฤต", _code: "M-B02", _sev: "วิกฤต" },
          { id: "q2-3", type: "passfail", required: true, requirePhoto: false, labelTh: "ความลาดเทท่อระบายน้ำทิ้งไม่น้อยกว่า 1:50 (2%)", labelEn: "ความลาดเทท่อระบายน้ำทิ้งไม่น้อยกว่า 1:50 (2%)", helpTh: "[M-B03] อ้างอิง: วสท. 4001-59 ข้อ 6.3 · ระดับ: สูง", helpEn: "[M-B03] อ้างอิง: วสท. 4001-59 ข้อ 6.3 · ระดับ: สูง", _code: "M-B03", _sev: "สูง" },
          { id: "q2-4", type: "passfail", required: false, requirePhoto: false, labelTh: "กับดักน้ำ (P-Trap/U-Trap) ทุกจุดระบาย ป้องกันกลิ่นขึ้น", labelEn: "กับดักน้ำ (P-Trap/U-Trap) ทุกจุดระบาย ป้องกันกลิ่นขึ้น", helpTh: "[M-B04] อ้างอิง: วสท. 4001-59 ข้อ 6.5 · ระดับ: กลาง", helpEn: "[M-B04] อ้างอิง: วสท. 4001-59 ข้อ 6.5 · ระดับ: กลาง", _code: "M-B04", _sev: "กลาง" },
          { id: "q2-5", type: "passfail", required: false, requirePhoto: false, labelTh: "ระบบน้ำร้อน ฉนวนหุ้มท่อครบ ไม่มีรอยรั่ว", labelEn: "ระบบน้ำร้อน ฉนวนหุ้มท่อครบ ไม่มีรอยรั่ว", helpTh: "[M-B05] อ้างอิง: วสท. 4001-59 ข้อ 7.2 · ระดับ: กลาง", helpEn: "[M-B05] อ้างอิง: วสท. 4001-59 ข้อ 7.2 · ระดับ: กลาง", _code: "M-B05", _sev: "กลาง" },
          { id: "q2-6", type: "passfail", required: true, requirePhoto: false, labelTh: "ถังพักน้ำ (Tank) ทดสอบความแน่นน้ำ 24 ชม. ไม่รั่ว", labelEn: "ถังพักน้ำ (Tank) ทดสอบความแน่นน้ำ 24 ชม. ไม่รั่ว", helpTh: "[M-B06] อ้างอิง: วสท. 4001-59 ข้อ 8.1 · ระดับ: สูง", helpEn: "[M-B06] อ้างอิง: วสท. 4001-59 ข้อ 8.1 · ระดับ: สูง", _code: "M-B06", _sev: "สูง" }
        ] },
      { id: "s3", nameTh: "ระบบปรับอากาศและระบายอากาศ (ASHRAE/วสท.)", nameEn: "Section C",
        descTh: "หมวด C · 5 รายการ", descEn: "Section C · 5 items",
        questions: [
          { id: "q3-1", type: "passfail", required: true, requirePhoto: false, labelTh: "ขนาด Chiller/AHU/FCU ถูกต้องตาม Load Calculation", labelEn: "ขนาด Chiller/AHU/FCU ถูกต้องตาม Load Calculation", helpTh: "[M-C01] อ้างอิง: ASHRAE 90.1 / วสท. · ระดับ: สูง", helpEn: "[M-C01] อ้างอิง: ASHRAE 90.1 / วสท. · ระดับ: สูง", _code: "M-C01", _sev: "สูง" },
          { id: "q3-2", type: "passfail", required: true, requirePhoto: false, labelTh: "ท่อลม (Duct) ไม่มีรั่ว ฉนวนหุ้มครบ ค่ารั่ว ≤ 5%", labelEn: "ท่อลม (Duct) ไม่มีรั่ว ฉนวนหุ้มครบ ค่ารั่ว ≤ 5%", helpTh: "[M-C02] อ้างอิง: ASHRAE 90.1 ข้อ 6.4 · ระดับ: สูง", helpEn: "[M-C02] อ้างอิง: ASHRAE 90.1 ข้อ 6.4 · ระดับ: สูง", _code: "M-C02", _sev: "สูง" },
          { id: "q3-3", type: "passfail", required: false, requirePhoto: false, labelTh: "อัตราการระบายอากาศสด (Fresh Air) ≥ 15 cfm/คน", labelEn: "อัตราการระบายอากาศสด (Fresh Air) ≥ 15 cfm/คน", helpTh: "[M-C03] อ้างอิง: ASHRAE 62.1 · ระดับ: กลาง", helpEn: "[M-C03] อ้างอิง: ASHRAE 62.1 · ระดับ: กลาง", _code: "M-C03", _sev: "กลาง" },
          { id: "q3-4", type: "passfail", required: true, requirePhoto: false, labelTh: "ทดสอบ Balancing ลม/น้ำเย็น ค่าเบี่ยงเบน ≤ 10%", labelEn: "ทดสอบ Balancing ลม/น้ำเย็น ค่าเบี่ยงเบน ≤ 10%", helpTh: "[M-C04] อ้างอิง: ASHRAE 111 · ระดับ: สูง", helpEn: "[M-C04] อ้างอิง: ASHRAE 111 · ระดับ: สูง", _code: "M-C04", _sev: "สูง" },
          { id: "q3-5", type: "passfail", required: false, requirePhoto: false, labelTh: "ระบบ Drain Pan และ Condensate Drain ไม่อุดตัน", labelEn: "ระบบ Drain Pan และ Condensate Drain ไม่อุดตัน", helpTh: "[M-C05] อ้างอิง: วสท. ทั่วไป · ระดับ: กลาง", helpEn: "[M-C05] อ้างอิง: วสท. ทั่วไป · ระดับ: กลาง", _code: "M-C05", _sev: "กลาง" }
        ] },
      { id: "s4", nameTh: "ระบบป้องกันอัคคีภัย (วสท. 3003 / NFPA 13)", nameEn: "Section D",
        descTh: "หมวด D · 6 รายการ", descEn: "Section D · 6 items",
        questions: [
          { id: "q4-1", type: "passfail", required: true, requirePhoto: true, labelTh: "ระบบ Sprinkler ครอบคลุมพื้นที่ตามมาตรฐาน (สูงสุด 12.1 ม²/หัว)", labelEn: "ระบบ Sprinkler ครอบคลุมพื้นที่ตามมาตรฐาน (สูงสุด 12.1 ม²/หัว)", helpTh: "[M-D01] อ้างอิง: NFPA 13 / วสท. 3003 · ระดับ: วิกฤต", helpEn: "[M-D01] อ้างอิง: NFPA 13 / วสท. 3003 · ระดับ: วิกฤต", _code: "M-D01", _sev: "วิกฤต" },
          { id: "q4-2", type: "passfail", required: true, requirePhoto: true, labelTh: "แรงดันน้ำระบบ Sprinkler ≥ 0.5 bar ที่หัว Sprinkler ไกลสุด", labelEn: "แรงดันน้ำระบบ Sprinkler ≥ 0.5 bar ที่หัว Sprinkler ไกลสุด", helpTh: "[M-D02] อ้างอิง: NFPA 13 ข้อ 7.2 · ระดับ: วิกฤต", helpEn: "[M-D02] อ้างอิง: NFPA 13 ข้อ 7.2 · ระดับ: วิกฤต", _code: "M-D02", _sev: "วิกฤต" },
          { id: "q4-3", type: "passfail", required: true, requirePhoto: true, labelTh: "ถังน้ำสำรอง (Fire Water Tank) ปริมาณตามการคำนวณ", labelEn: "ถังน้ำสำรอง (Fire Water Tank) ปริมาณตามการคำนวณ", helpTh: "[M-D03] อ้างอิง: วสท. 3003 ข้อ 5.1 · ระดับ: วิกฤต", helpEn: "[M-D03] อ้างอิง: วสท. 3003 ข้อ 5.1 · ระดับ: วิกฤต", _code: "M-D03", _sev: "วิกฤต" },
          { id: "q4-4", type: "passfail", required: true, requirePhoto: true, labelTh: "ระบบสัญญาณแจ้งเหตุเพลิงไหม้ (Fire Alarm) ทดสอบแล้ว", labelEn: "ระบบสัญญาณแจ้งเหตุเพลิงไหม้ (Fire Alarm) ทดสอบแล้ว", helpTh: "[M-D04] อ้างอิง: NFPA 72 / วสท. 3003 · ระดับ: วิกฤต", helpEn: "[M-D04] อ้างอิง: NFPA 72 / วสท. 3003 · ระดับ: วิกฤต", _code: "M-D04", _sev: "วิกฤต" },
          { id: "q4-5", type: "passfail", required: true, requirePhoto: true, labelTh: "ทางออกฉุกเฉิน ป้ายทางหนีไฟ แสงสว่างฉุกเฉินครบถ้วน", labelEn: "ทางออกฉุกเฉิน ป้ายทางหนีไฟ แสงสว่างฉุกเฉินครบถ้วน", helpTh: "[M-D05] อ้างอิง: กฎกระทรวง ปี 2555 ข้อ 14 · ระดับ: วิกฤต", helpEn: "[M-D05] อ้างอิง: กฎกระทรวง ปี 2555 ข้อ 14 · ระดับ: วิกฤต", _code: "M-D05", _sev: "วิกฤต" },
          { id: "q4-6", type: "passfail", required: true, requirePhoto: false, labelTh: "ถังดับเพลิง (Fire Extinguisher) ครบจุด ภายในอายุ", labelEn: "ถังดับเพลิง (Fire Extinguisher) ครบจุด ภายในอายุ", helpTh: "[M-D06] อ้างอิง: กฎกระทรวง ปี 2555 · ระดับ: สูง", helpEn: "[M-D06] อ้างอิง: กฎกระทรวง ปี 2555 · ระดับ: สูง", _code: "M-D06", _sev: "สูง" }
        ] }
    ]
  },
  { id: "ck-tpl-finishing", icon: "🎨", nameTh: "งานตกแต่ง (มยผ.)", nameEn: "Finishing (มยผ.)",
    descTh: "ฉาบปูน · พื้น · ทาสี · ฝ้าเพดาน · ประตูหน้าต่าง · ความปลอดภัยทางวัสดุ",
    descEn: "Plaster · flooring · paint · ceiling · doors & windows",
    refStd: "มยผ. 1101-64 หมวด 8",
    sections: [
      { id: "s1", nameTh: "งานฉาบปูนและผนัง", nameEn: "Section A",
        descTh: "หมวด A · 5 รายการ", descEn: "Section A · 5 items",
        questions: [
          { id: "q1-1", type: "passfail", required: true, requirePhoto: false, labelTh: "ผิวผนังก่อนฉาบสะอาด ชุ่มน้ำ ไม่มีน้ำมันหรือสิ่งปนเปื้อน", labelEn: "ผิวผนังก่อนฉาบสะอาด ชุ่มน้ำ ไม่มีน้ำมันหรือสิ่งปนเปื้อน", helpTh: "[F-A01] อ้างอิง: มยผ. 1101-64 ข้อ 8.2 · ระดับ: สูง", helpEn: "[F-A01] อ้างอิง: มยผ. 1101-64 ข้อ 8.2 · ระดับ: สูง", _code: "F-A01", _sev: "สูง" },
          { id: "q1-2", type: "passfail", required: false, requirePhoto: false, labelTh: "ความหนาปูนฉาบ 15–20 มม. สม่ำเสมอ", labelEn: "ความหนาปูนฉาบ 15–20 มม. สม่ำเสมอ", helpTh: "[F-A02] อ้างอิง: มยผ. 1101-64 ข้อ 8.3 · ระดับ: กลาง", helpEn: "[F-A02] อ้างอิง: มยผ. 1101-64 ข้อ 8.3 · ระดับ: กลาง", _code: "F-A02", _sev: "กลาง" },
          { id: "q1-3", type: "passfail", required: true, requirePhoto: false, labelTh: "ผิวฉาบเรียบสม่ำเสมอ ไม่มีรอยแตกร้าวเกิน 0.2 มม.", labelEn: "ผิวฉาบเรียบสม่ำเสมอ ไม่มีรอยแตกร้าวเกิน 0.2 มม.", helpTh: "[F-A03] อ้างอิง: มยผ. 1101-64 ข้อ 8.4 · ระดับ: สูง", helpEn: "[F-A03] อ้างอิง: มยผ. 1101-64 ข้อ 8.4 · ระดับ: สูง", _code: "F-A03", _sev: "สูง" },
          { id: "q1-4", type: "passfail", required: false, requirePhoto: false, labelTh: "มุมฉากและเส้นตรงของผนังค่าเบี่ยงเบน ≤ 3 มม./3 ม.", labelEn: "มุมฉากและเส้นตรงของผนังค่าเบี่ยงเบน ≤ 3 มม./3 ม.", helpTh: "[F-A04] อ้างอิง: มยผ. 1101-64 ข้อ 8.5 · ระดับ: กลาง", helpEn: "[F-A04] อ้างอิง: มยผ. 1101-64 ข้อ 8.5 · ระดับ: กลาง", _code: "F-A04", _sev: "กลาง" },
          { id: "q1-5", type: "passfail", required: true, requirePhoto: true, labelTh: "บริเวณเปียกชื้น (ห้องน้ำ) ทาน้ำยากันซึมก่อนปูกระเบื้อง", labelEn: "บริเวณเปียกชื้น (ห้องน้ำ) ทาน้ำยากันซึมก่อนปูกระเบื้อง", helpTh: "[F-A05] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: วิกฤต", helpEn: "[F-A05] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: วิกฤต", _code: "F-A05", _sev: "วิกฤต" }
        ] },
      { id: "s2", nameTh: "งานพื้น", nameEn: "Section B",
        descTh: "หมวด B · 5 รายการ", descEn: "Section B · 5 items",
        questions: [
          { id: "q2-1", type: "passfail", required: true, requirePhoto: false, labelTh: "ความลาดเทพื้นห้องน้ำไม่น้อยกว่า 1:50 ไปยังรางระบายน้ำ", labelEn: "ความลาดเทพื้นห้องน้ำไม่น้อยกว่า 1:50 ไปยังรางระบายน้ำ", helpTh: "[F-B01] อ้างอิง: มยผ. 1101-64 ข้อ 8.8 · ระดับ: สูง", helpEn: "[F-B01] อ้างอิง: มยผ. 1101-64 ข้อ 8.8 · ระดับ: สูง", _code: "F-B01", _sev: "สูง" },
          { id: "q2-2", type: "passfail", required: true, requirePhoto: false, labelTh: "กระเบื้องยึดแน่น เคาะเสียง Solid ทั่วทุกแผ่น ไม่มีเสียงโพรง", labelEn: "กระเบื้องยึดแน่น เคาะเสียง Solid ทั่วทุกแผ่น ไม่มีเสียงโพรง", helpTh: "[F-B02] อ้างอิง: มาตรฐาน มอก. 1552 · ระดับ: สูง", helpEn: "[F-B02] อ้างอิง: มาตรฐาน มอก. 1552 · ระดับ: สูง", _code: "F-B02", _sev: "สูง" },
          { id: "q2-3", type: "passfail", required: false, requirePhoto: false, labelTh: "รอยต่อกระเบื้อง (Grout) เต็ม สม่ำเสมอ ไม่แตกร้าว", labelEn: "รอยต่อกระเบื้อง (Grout) เต็ม สม่ำเสมอ ไม่แตกร้าว", helpTh: "[F-B03] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: กลาง", helpEn: "[F-B03] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: กลาง", _code: "F-B03", _sev: "กลาง" },
          { id: "q2-4", type: "passfail", required: false, requirePhoto: false, labelTh: "ระดับพื้นห้องโถง/ระเบียง เสมอกัน ค่าเบี่ยงเบน ≤ 3 มม.", labelEn: "ระดับพื้นห้องโถง/ระเบียง เสมอกัน ค่าเบี่ยงเบน ≤ 3 มม.", helpTh: "[F-B04] อ้างอิง: มยผ. 1101-64 ข้อ 8.9 · ระดับ: กลาง", helpEn: "[F-B04] อ้างอิง: มยผ. 1101-64 ข้อ 8.9 · ระดับ: กลาง", _code: "F-B04", _sev: "กลาง" },
          { id: "q2-5", type: "passfail", required: false, requirePhoto: false, labelTh: "พื้นหิน (Marble/Granite) ขัดมันสม่ำเสมอ ไม่มีรอยขีดข่วน", labelEn: "พื้นหิน (Marble/Granite) ขัดมันสม่ำเสมอ ไม่มีรอยขีดข่วน", helpTh: "[F-B05] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: กลาง", helpEn: "[F-B05] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: กลาง", _code: "F-B05", _sev: "กลาง" }
        ] },
      { id: "s3", nameTh: "งานทาสี", nameEn: "Section C",
        descTh: "หมวด C · 5 รายการ", descEn: "Section C · 5 items",
        questions: [
          { id: "q3-1", type: "passfail", required: true, requirePhoto: false, labelTh: "ผิวผนังสะอาด แห้งสนิท (ความชื้น ≤ 15%) ก่อนทาสี", labelEn: "ผิวผนังสะอาด แห้งสนิท (ความชื้น ≤ 15%) ก่อนทาสี", helpTh: "[F-C01] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: สูง", helpEn: "[F-C01] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: สูง", _code: "F-C01", _sev: "สูง" },
          { id: "q3-2", type: "passfail", required: true, requirePhoto: false, labelTh: "ทาสีรองพื้น (Primer) ครบทั่วทุกพื้นผิว", labelEn: "ทาสีรองพื้น (Primer) ครบทั่วทุกพื้นผิว", helpTh: "[F-C02] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: สูง", helpEn: "[F-C02] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: สูง", _code: "F-C02", _sev: "สูง" },
          { id: "q3-3", type: "passfail", required: true, requirePhoto: false, labelTh: "ทาสีจริงครบ 2 รอบ ความหนาแห้ง (DFT) ≥ 40 ไมครอน", labelEn: "ทาสีจริงครบ 2 รอบ ความหนาแห้ง (DFT) ≥ 40 ไมครอน", helpTh: "[F-C03] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: สูง", helpEn: "[F-C03] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: สูง", _code: "F-C03", _sev: "สูง" },
          { id: "q3-4", type: "passfail", required: false, requirePhoto: false, labelTh: "สีสม่ำเสมอ ไม่มีรอยพู่กัน รอยม้วน หรือสีหลุดร่อน", labelEn: "สีสม่ำเสมอ ไม่มีรอยพู่กัน รอยม้วน หรือสีหลุดร่อน", helpTh: "[F-C04] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: กลาง", helpEn: "[F-C04] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: กลาง", _code: "F-C04", _sev: "กลาง" },
          { id: "q3-5", type: "passfail", required: false, requirePhoto: false, labelTh: "สีตรงตาม Color Code ที่กำหนดในแบบทุกพื้นที่", labelEn: "สีตรงตาม Color Code ที่กำหนดในแบบทุกพื้นที่", helpTh: "[F-C05] อ้างอิง: แบบก่อสร้าง · ระดับ: กลาง", helpEn: "[F-C05] อ้างอิง: แบบก่อสร้าง · ระดับ: กลาง", _code: "F-C05", _sev: "กลาง" }
        ] },
      { id: "s4", nameTh: "งานฝ้าเพดาน", nameEn: "Section D",
        descTh: "หมวด D · 4 รายการ", descEn: "Section D · 4 items",
        questions: [
          { id: "q4-1", type: "passfail", required: true, requirePhoto: false, labelTh: "โครงคร่าวฝ้าแข็งแรง ระดับเสมอกัน ค่าเบี่ยงเบน ≤ 3 มม./3 ม.", labelEn: "โครงคร่าวฝ้าแข็งแรง ระดับเสมอกัน ค่าเบี่ยงเบน ≤ 3 มม./3 ม.", helpTh: "[F-D01] อ้างอิง: มยผ. 1101-64 ข้อ 8.12 · ระดับ: สูง", helpEn: "[F-D01] อ้างอิง: มยผ. 1101-64 ข้อ 8.12 · ระดับ: สูง", _code: "F-D01", _sev: "สูง" },
          { id: "q4-2", type: "passfail", required: false, requirePhoto: false, labelTh: "แผ่นฝ้าติดแน่น ไม่มีการแอ่นตัว รอยต่อตรง", labelEn: "แผ่นฝ้าติดแน่น ไม่มีการแอ่นตัว รอยต่อตรง", helpTh: "[F-D02] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: กลาง", helpEn: "[F-D02] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: กลาง", _code: "F-D02", _sev: "กลาง" },
          { id: "q4-3", type: "passfail", required: false, requirePhoto: false, labelTh: "ช่องเข้าตรวจ (Access Panel) ทุก 4 ม. หรือตามแบบ", labelEn: "ช่องเข้าตรวจ (Access Panel) ทุก 4 ม. หรือตามแบบ", helpTh: "[F-D03] อ้างอิง: มยผ. ทั่วไป · ระดับ: กลาง", helpEn: "[F-D03] อ้างอิง: มยผ. ทั่วไป · ระดับ: กลาง", _code: "F-D03", _sev: "กลาง" },
          { id: "q4-4", type: "passfail", required: false, requirePhoto: false, labelTh: "ระยะห่างจากฝ้าถึงงาน MEP เพียงพอสำหรับบำรุงรักษา", labelEn: "ระยะห่างจากฝ้าถึงงาน MEP เพียงพอสำหรับบำรุงรักษา", helpTh: "[F-D04] อ้างอิง: มยผ. ทั่วไป · ระดับ: กลาง", helpEn: "[F-D04] อ้างอิง: มยผ. ทั่วไป · ระดับ: กลาง", _code: "F-D04", _sev: "กลาง" }
        ] },
      { id: "s5", nameTh: "งานประตู หน้าต่าง และวงกบ", nameEn: "Section E",
        descTh: "หมวด E · 5 รายการ", descEn: "Section E · 5 items",
        questions: [
          { id: "q5-1", type: "passfail", required: true, requirePhoto: false, labelTh: "วงกบประตู/หน้าต่างได้ฉากและดิ่ง ค่าเบี่ยงเบน ≤ 2 มม.", labelEn: "วงกบประตู/หน้าต่างได้ฉากและดิ่ง ค่าเบี่ยงเบน ≤ 2 มม.", helpTh: "[F-E01] อ้างอิง: มยผ. 1101-64 ข้อ 8.15 · ระดับ: สูง", helpEn: "[F-E01] อ้างอิง: มยผ. 1101-64 ข้อ 8.15 · ระดับ: สูง", _code: "F-E01", _sev: "สูง" },
          { id: "q5-2", type: "passfail", required: false, requirePhoto: false, labelTh: "ช่องว่างระหว่างบานและวงกบสม่ำเสมอ 2–3 มม.", labelEn: "ช่องว่างระหว่างบานและวงกบสม่ำเสมอ 2–3 มม.", helpTh: "[F-E02] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: กลาง", helpEn: "[F-E02] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: กลาง", _code: "F-E02", _sev: "กลาง" },
          { id: "q5-3", type: "passfail", required: true, requirePhoto: false, labelTh: "การยึดวงกบกับผนัง แน่น ไม่โยก มีการยาแนวซิลิโคน", labelEn: "การยึดวงกบกับผนัง แน่น ไม่โยก มีการยาแนวซิลิโคน", helpTh: "[F-E03] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: สูง", helpEn: "[F-E03] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: สูง", _code: "F-E03", _sev: "สูง" },
          { id: "q5-4", type: "passfail", required: false, requirePhoto: false, labelTh: "บานประตู/หน้าต่างเปิด-ปิดได้เรียบ ล็อคได้แน่น", labelEn: "บานประตู/หน้าต่างเปิด-ปิดได้เรียบ ล็อคได้แน่น", helpTh: "[F-E04] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: กลาง", helpEn: "[F-E04] อ้างอิง: มาตรฐานผู้ผลิต · ระดับ: กลาง", _code: "F-E04", _sev: "กลาง" },
          { id: "q5-5", type: "passfail", required: true, requirePhoto: false, labelTh: "กระจกไม่มีรอยขีดข่วน ฟองอากาศ หรือรอยแตกร้าว", labelEn: "กระจกไม่มีรอยขีดข่วน ฟองอากาศ หรือรอยแตกร้าว", helpTh: "[F-E05] อ้างอิง: มยผ. ทั่วไป / มอก. 154 · ระดับ: สูง", helpEn: "[F-E05] อ้างอิง: มยผ. ทั่วไป / มอก. 154 · ระดับ: สูง", _code: "F-E05", _sev: "สูง" }
        ] }
    ]
  },
  { id: "ck-tpl-safety", icon: "🦺", nameTh: "Safety (OSHA-TH)", nameEn: "Safety (OSHA-TH)",
    descTh: "PPE · นั่งร้าน · เครื่องจักรยก · ทางหนีไฟ · สุขอนามัย · งานพิเศษ",
    descEn: "PPE · scaffolding · cranes · fire egress · sanitation · hot work",
    refStd: "กฎกระทรวงปี 2565 · ISO 45001",
    sections: [
      { id: "s1", nameTh: "อุปกรณ์ป้องกันส่วนบุคคล (PPE)", nameEn: "Section A",
        descTh: "หมวด A · 5 รายการ", descEn: "Section A · 5 items",
        questions: [
          { id: "q1-1", type: "passfail", required: true, requirePhoto: true, labelTh: "คนงานทุกคนสวมหมวกนิรภัย (Hard Hat Class E/G) ตลอดเวลา", labelEn: "คนงานทุกคนสวมหมวกนิรภัย (Hard Hat Class E/G) ตลอดเวลา", helpTh: "[SA-A01] อ้างอิง: กฎกระทรวง 2565 ข้อ 5 · ระดับ: วิกฤต", helpEn: "[SA-A01] อ้างอิง: กฎกระทรวง 2565 ข้อ 5 · ระดับ: วิกฤต", _code: "SA-A01", _sev: "วิกฤต" },
          { id: "q1-2", type: "passfail", required: true, requirePhoto: true, labelTh: "รองเท้านิรภัย (Safety Boots) หัวเหล็ก พื้นกันตะปู", labelEn: "รองเท้านิรภัย (Safety Boots) หัวเหล็ก พื้นกันตะปู", helpTh: "[SA-A02] อ้างอิง: กฎกระทรวง 2565 ข้อ 5 · ระดับ: วิกฤต", helpEn: "[SA-A02] อ้างอิง: กฎกระทรวง 2565 ข้อ 5 · ระดับ: วิกฤต", _code: "SA-A02", _sev: "วิกฤต" },
          { id: "q1-3", type: "passfail", required: true, requirePhoto: true, labelTh: "งานที่ความสูง >2 ม. ใส่สายรัดตัว (Full Body Harness) ตลอด", labelEn: "งานที่ความสูง >2 ม. ใส่สายรัดตัว (Full Body Harness) ตลอด", helpTh: "[SA-A03] อ้างอิง: กฎกระทรวง 2565 ข้อ 16 · ระดับ: วิกฤต", helpEn: "[SA-A03] อ้างอิง: กฎกระทรวง 2565 ข้อ 16 · ระดับ: วิกฤต", _code: "SA-A03", _sev: "วิกฤต" },
          { id: "q1-4", type: "passfail", required: true, requirePhoto: false, labelTh: "แว่นตานิรภัยสำหรับงานเจาะ/เชื่อม/ตัด", labelEn: "แว่นตานิรภัยสำหรับงานเจาะ/เชื่อม/ตัด", helpTh: "[SA-A04] อ้างอิง: กฎกระทรวง 2565 ข้อ 5 · ระดับ: สูง", helpEn: "[SA-A04] อ้างอิง: กฎกระทรวง 2565 ข้อ 5 · ระดับ: สูง", _code: "SA-A04", _sev: "สูง" },
          { id: "q1-5", type: "passfail", required: true, requirePhoto: false, labelTh: "หน้ากากกรองฝุ่น (N95+) สำหรับงานฝุ่น/ฟูม", labelEn: "หน้ากากกรองฝุ่น (N95+) สำหรับงานฝุ่น/ฟูม", helpTh: "[SA-A05] อ้างอิง: กฎกระทรวง 2565 ข้อ 5 · ระดับ: สูง", helpEn: "[SA-A05] อ้างอิง: กฎกระทรวง 2565 ข้อ 5 · ระดับ: สูง", _code: "SA-A05", _sev: "สูง" }
        ] },
      { id: "s2", nameTh: "นั่งร้านและที่กั้นตก", nameEn: "Section B",
        descTh: "หมวด B · 5 รายการ", descEn: "Section B · 5 items",
        questions: [
          { id: "q2-1", type: "passfail", required: true, requirePhoto: true, labelTh: "นั่งร้าน (Scaffolding) ได้รับการออกแบบและรับรองโดยวิศวกร", labelEn: "นั่งร้าน (Scaffolding) ได้รับการออกแบบและรับรองโดยวิศวกร", helpTh: "[SA-B01] อ้างอิง: กฎกระทรวง 2565 ข้อ 12 · ระดับ: วิกฤต", helpEn: "[SA-B01] อ้างอิง: กฎกระทรวง 2565 ข้อ 12 · ระดับ: วิกฤต", _code: "SA-B01", _sev: "วิกฤต" },
          { id: "q2-2", type: "passfail", required: true, requirePhoto: true, labelTh: "แผ่นพื้นนั่งร้านมั่นคง กว้าง ≥ 40 ซม. ยึดแน่น ไม่โยกคลอน", labelEn: "แผ่นพื้นนั่งร้านมั่นคง กว้าง ≥ 40 ซม. ยึดแน่น ไม่โยกคลอน", helpTh: "[SA-B02] อ้างอิง: กฎกระทรวง 2565 ข้อ 12 · ระดับ: วิกฤต", helpEn: "[SA-B02] อ้างอิง: กฎกระทรวง 2565 ข้อ 12 · ระดับ: วิกฤต", _code: "SA-B02", _sev: "วิกฤต" },
          { id: "q2-3", type: "passfail", required: true, requirePhoto: true, labelTh: "ราวกั้นตก (Guardrail) สูง ≥ 90 ซม. มี Mid-rail และ Toeboard", labelEn: "ราวกั้นตก (Guardrail) สูง ≥ 90 ซม. มี Mid-rail และ Toeboard", helpTh: "[SA-B03] อ้างอิง: กฎกระทรวง 2565 ข้อ 13 · ระดับ: วิกฤต", helpEn: "[SA-B03] อ้างอิง: กฎกระทรวง 2565 ข้อ 13 · ระดับ: วิกฤต", _code: "SA-B03", _sev: "วิกฤต" },
          { id: "q2-4", type: "passfail", required: true, requirePhoto: true, labelTh: "ที่กั้นตก (Safety Net) ติดตั้งทุกพื้นที่ที่ไม่มีพื้น", labelEn: "ที่กั้นตก (Safety Net) ติดตั้งทุกพื้นที่ที่ไม่มีพื้น", helpTh: "[SA-B04] อ้างอิง: กฎกระทรวง 2565 ข้อ 14 · ระดับ: วิกฤต", helpEn: "[SA-B04] อ้างอิง: กฎกระทรวง 2565 ข้อ 14 · ระดับ: วิกฤต", _code: "SA-B04", _sev: "วิกฤต" },
          { id: "q2-5", type: "passfail", required: true, requirePhoto: true, labelTh: "การยึดนั่งร้านกับโครงสร้างอาคาร ทุก 4 ม. แนวตั้ง", labelEn: "การยึดนั่งร้านกับโครงสร้างอาคาร ทุก 4 ม. แนวตั้ง", helpTh: "[SA-B05] อ้างอิง: กฎกระทรวง 2565 ข้อ 12 · ระดับ: วิกฤต", helpEn: "[SA-B05] อ้างอิง: กฎกระทรวง 2565 ข้อ 12 · ระดับ: วิกฤต", _code: "SA-B05", _sev: "วิกฤต" }
        ] },
      { id: "s3", nameTh: "เครื่องจักรและอุปกรณ์ยก", nameEn: "Section C",
        descTh: "หมวด C · 5 รายการ", descEn: "Section C · 5 items",
        questions: [
          { id: "q3-1", type: "passfail", required: true, requirePhoto: true, labelTh: "เครนและอุปกรณ์ยกมีใบอนุญาตและตรวจสอบประจำปี", labelEn: "เครนและอุปกรณ์ยกมีใบอนุญาตและตรวจสอบประจำปี", helpTh: "[SA-C01] อ้างอิง: กฎกระทรวง 2553 ข้อ 3 · ระดับ: วิกฤต", helpEn: "[SA-C01] อ้างอิง: กฎกระทรวง 2553 ข้อ 3 · ระดับ: วิกฤต", _code: "SA-C01", _sev: "วิกฤต" },
          { id: "q3-2", type: "passfail", required: true, requirePhoto: true, labelTh: "ผู้ควบคุมเครนมีใบอนุญาตจากกรมสวัสดิการ", labelEn: "ผู้ควบคุมเครนมีใบอนุญาตจากกรมสวัสดิการ", helpTh: "[SA-C02] อ้างอิง: กฎกระทรวง 2553 ข้อ 7 · ระดับ: วิกฤต", helpEn: "[SA-C02] อ้างอิง: กฎกระทรวง 2553 ข้อ 7 · ระดับ: วิกฤต", _code: "SA-C02", _sev: "วิกฤต" },
          { id: "q3-3", type: "passfail", required: true, requirePhoto: false, labelTh: "Rigging Equipment (ลวดสลิง/โซ่) ตรวจสอบก่อนใช้งานทุกวัน", labelEn: "Rigging Equipment (ลวดสลิง/โซ่) ตรวจสอบก่อนใช้งานทุกวัน", helpTh: "[SA-C03] อ้างอิง: ASME B30.9 · ระดับ: สูง", helpEn: "[SA-C03] อ้างอิง: ASME B30.9 · ระดับ: สูง", _code: "SA-C03", _sev: "สูง" },
          { id: "q3-4", type: "passfail", required: true, requirePhoto: true, labelTh: "พื้นที่ใต้งานยก มีการกั้นล้อมและป้ายเตือนห้ามเข้า", labelEn: "พื้นที่ใต้งานยก มีการกั้นล้อมและป้ายเตือนห้ามเข้า", helpTh: "[SA-C04] อ้างอิง: กฎกระทรวง 2565 ข้อ 20 · ระดับ: วิกฤต", helpEn: "[SA-C04] อ้างอิง: กฎกระทรวง 2565 ข้อ 20 · ระดับ: วิกฤต", _code: "SA-C04", _sev: "วิกฤต" },
          { id: "q3-5", type: "passfail", required: true, requirePhoto: false, labelTh: "รถ Forklift/Backhoe มีสัญญาณเสียงถอยหลัง ไฟฉุกเฉิน", labelEn: "รถ Forklift/Backhoe มีสัญญาณเสียงถอยหลัง ไฟฉุกเฉิน", helpTh: "[SA-C05] อ้างอิง: กฎกระทรวง 2565 ข้อ 22 · ระดับ: สูง", helpEn: "[SA-C05] อ้างอิง: กฎกระทรวง 2565 ข้อ 22 · ระดับ: สูง", _code: "SA-C05", _sev: "สูง" }
        ] },
      { id: "s4", nameTh: "ทางเดินและทางหนีไฟ", nameEn: "Section D",
        descTh: "หมวด D · 4 รายการ", descEn: "Section D · 4 items",
        questions: [
          { id: "q4-1", type: "passfail", required: true, requirePhoto: true, labelTh: "ทางหนีไฟกว้าง ≥ 90 ซม. ไม่มีสิ่งกีดขวางตลอดเส้นทาง", labelEn: "ทางหนีไฟกว้าง ≥ 90 ซม. ไม่มีสิ่งกีดขวางตลอดเส้นทาง", helpTh: "[SA-D01] อ้างอิง: กฎกระทรวง ปี 2555 ข้อ 14 · ระดับ: วิกฤต", helpEn: "[SA-D01] อ้างอิง: กฎกระทรวง ปี 2555 ข้อ 14 · ระดับ: วิกฤต", _code: "SA-D01", _sev: "วิกฤต" },
          { id: "q4-2", type: "passfail", required: true, requirePhoto: true, labelTh: "ป้ายทางหนีไฟ (Exit Sign) ติดสว่างตลอด 24 ชม.", labelEn: "ป้ายทางหนีไฟ (Exit Sign) ติดสว่างตลอด 24 ชม.", helpTh: "[SA-D02] อ้างอิง: กฎกระทรวง ปี 2555 ข้อ 15 · ระดับ: วิกฤต", helpEn: "[SA-D02] อ้างอิง: กฎกระทรวง ปี 2555 ข้อ 15 · ระดับ: วิกฤต", _code: "SA-D02", _sev: "วิกฤต" },
          { id: "q4-3", type: "passfail", required: true, requirePhoto: false, labelTh: "ทางเดินในไซต์แยกออกจากเส้นทางรถ มีป้ายเตือนชัดเจน", labelEn: "ทางเดินในไซต์แยกออกจากเส้นทางรถ มีป้ายเตือนชัดเจน", helpTh: "[SA-D03] อ้างอิง: กฎกระทรวง 2565 ข้อ 9 · ระดับ: สูง", helpEn: "[SA-D03] อ้างอิง: กฎกระทรวง 2565 ข้อ 9 · ระดับ: สูง", _code: "SA-D03", _sev: "สูง" },
          { id: "q4-4", type: "passfail", required: false, requirePhoto: false, labelTh: "แสงสว่างบริเวณทำงาน ≥ 200 lux พื้นที่ทั่วไป, ≥ 500 lux งานละเอียด", labelEn: "แสงสว่างบริเวณทำงาน ≥ 200 lux พื้นที่ทั่วไป, ≥ 500 lux งานละเอียด", helpTh: "[SA-D04] อ้างอิง: กฎกระทรวง 2565 ข้อ 8 · ระดับ: กลาง", helpEn: "[SA-D04] อ้างอิง: กฎกระทรวง 2565 ข้อ 8 · ระดับ: กลาง", _code: "SA-D04", _sev: "กลาง" }
        ] },
      { id: "s5", nameTh: "สุขอนามัยและสวัสดิการในไซต์", nameEn: "Section E",
        descTh: "หมวด E · 4 รายการ", descEn: "Section E · 4 items",
        questions: [
          { id: "q5-1", type: "passfail", required: false, requirePhoto: false, labelTh: "ห้องน้ำ 1 ห้องต่อคนงาน 20 คน สะอาด มีน้ำใช้เพียงพอ", labelEn: "ห้องน้ำ 1 ห้องต่อคนงาน 20 คน สะอาด มีน้ำใช้เพียงพอ", helpTh: "[SA-E01] อ้างอิง: กฎกระทรวง 2565 ข้อ 26 · ระดับ: กลาง", helpEn: "[SA-E01] อ้างอิง: กฎกระทรวง 2565 ข้อ 26 · ระดับ: กลาง", _code: "SA-E01", _sev: "กลาง" },
          { id: "q5-2", type: "passfail", required: false, requirePhoto: false, labelTh: "น้ำดื่มสะอาดเพียงพอ อย่างน้อย 1 ลิตร/คน/ชั่วโมง", labelEn: "น้ำดื่มสะอาดเพียงพอ อย่างน้อย 1 ลิตร/คน/ชั่วโมง", helpTh: "[SA-E02] อ้างอิง: กฎกระทรวง 2565 ข้อ 27 · ระดับ: กลาง", helpEn: "[SA-E02] อ้างอิง: กฎกระทรวง 2565 ข้อ 27 · ระดับ: กลาง", _code: "SA-E02", _sev: "กลาง" },
          { id: "q5-3", type: "passfail", required: true, requirePhoto: false, labelTh: "ชุดปฐมพยาบาลครบถ้วน มีผู้รับผิดชอบประจำ", labelEn: "ชุดปฐมพยาบาลครบถ้วน มีผู้รับผิดชอบประจำ", helpTh: "[SA-E03] อ้างอิง: กฎกระทรวง 2565 ข้อ 28 · ระดับ: สูง", helpEn: "[SA-E03] อ้างอิง: กฎกระทรวง 2565 ข้อ 28 · ระดับ: สูง", _code: "SA-E03", _sev: "สูง" },
          { id: "q5-4", type: "passfail", required: false, requirePhoto: false, labelTh: "ป้ายความปลอดภัย/ข้อห้ามติดชัดเจนทุกจุดอันตราย", labelEn: "ป้ายความปลอดภัย/ข้อห้ามติดชัดเจนทุกจุดอันตราย", helpTh: "[SA-E04] อ้างอิง: ISO 45001 / กฎกระทรวง · ระดับ: กลาง", helpEn: "[SA-E04] อ้างอิง: ISO 45001 / กฎกระทรวง · ระดับ: กลาง", _code: "SA-E04", _sev: "กลาง" }
        ] },
      { id: "s6", nameTh: "งานพิเศษ (งานไฟฟ้า เชื่อม เจาะ)", nameEn: "Section F",
        descTh: "หมวด F · 4 รายการ", descEn: "Section F · 4 items",
        questions: [
          { id: "q6-1", type: "passfail", required: true, requirePhoto: true, labelTh: "งานเชื่อม: กั้นม่านกันประกาย มีถังดับเพลิงพร้อม", labelEn: "งานเชื่อม: กั้นม่านกันประกาย มีถังดับเพลิงพร้อม", helpTh: "[SA-F01] อ้างอิง: กฎกระทรวง 2565 ข้อ 30 · ระดับ: วิกฤต", helpEn: "[SA-F01] อ้างอิง: กฎกระทรวง 2565 ข้อ 30 · ระดับ: วิกฤต", _code: "SA-F01", _sev: "วิกฤต" },
          { id: "q6-2", type: "passfail", required: true, requirePhoto: true, labelTh: "งานไฟฟ้า: ตัดไฟ Lock-out/Tag-out ก่อนทำงานทุกครั้ง", labelEn: "งานไฟฟ้า: ตัดไฟ Lock-out/Tag-out ก่อนทำงานทุกครั้ง", helpTh: "[SA-F02] อ้างอิง: กฎกระทรวง 2565 ข้อ 31 · ระดับ: วิกฤต", helpEn: "[SA-F02] อ้างอิง: กฎกระทรวง 2565 ข้อ 31 · ระดับ: วิกฤต", _code: "SA-F02", _sev: "วิกฤต" },
          { id: "q6-3", type: "passfail", required: true, requirePhoto: false, labelTh: "งานเจาะ: ตรวจสอบแบบ Shop Drawing ไม่มีท่อ/สายอยู่ในเส้นทาง", labelEn: "งานเจาะ: ตรวจสอบแบบ Shop Drawing ไม่มีท่อ/สายอยู่ในเส้นทาง", helpTh: "[SA-F03] อ้างอิง: กฎกระทรวง 2565 · ระดับ: สูง", helpEn: "[SA-F03] อ้างอิง: กฎกระทรวง 2565 · ระดับ: สูง", _code: "SA-F03", _sev: "สูง" },
          { id: "q6-4", type: "passfail", required: true, requirePhoto: true, labelTh: "งานใน Space จำกัด: ทดสอบอากาศ มีผู้เฝ้าระวังด้านนอก", labelEn: "งานใน Space จำกัด: ทดสอบอากาศ มีผู้เฝ้าระวังด้านนอก", helpTh: "[SA-F04] อ้างอิง: กฎกระทรวง 2565 ข้อ 35 · ระดับ: วิกฤต", helpEn: "[SA-F04] อ้างอิง: กฎกระทรวง 2565 ข้อ 35 · ระดับ: วิกฤต", _code: "SA-F04", _sev: "วิกฤต" }
        ] }
    ]
  },
  { id: "ck-tpl-eia", icon: "🌿", nameTh: "สิ่งแวดล้อม (EIA)", nameEn: "Environment (EIA)",
    descTh: "ฝุ่น · เสียง · น้ำเสีย · ของแข็ง · ต้นไม้และพื้นที่สีเขียว · การรายงาน",
    descEn: "Dust · noise · wastewater · solid waste · vegetation · reporting",
    refStd: "ประกาศ ทส. 2561 · มาตรฐาน คพ.",
    sections: [
      { id: "s1", nameTh: "การควบคุมฝุ่นละออง", nameEn: "Section A",
        descTh: "หมวด A · 6 รายการ", descEn: "Section A · 6 items",
        questions: [
          { id: "q1-1", type: "passfail", required: true, requirePhoto: true, labelTh: "ติดตั้งรั้วกั้นไซต์สูง ≥ 2 ม. ป้องกันฝุ่นออกสู่ชุมชน", labelEn: "ติดตั้งรั้วกั้นไซต์สูง ≥ 2 ม. ป้องกันฝุ่นออกสู่ชุมชน", helpTh: "[E-A01] อ้างอิง: ประกาศ คพ. 2561 ข้อ 3 · ระดับ: วิกฤต", helpEn: "[E-A01] อ้างอิง: ประกาศ คพ. 2561 ข้อ 3 · ระดับ: วิกฤต", _code: "E-A01", _sev: "วิกฤต" },
          { id: "q1-2", type: "passfail", required: true, requirePhoto: false, labelTh: "ฉีดพรมน้ำถนนและบริเวณทำงานทุก 2 ชม. ในฤดูแล้ง", labelEn: "ฉีดพรมน้ำถนนและบริเวณทำงานทุก 2 ชม. ในฤดูแล้ง", helpTh: "[E-A02] อ้างอิง: ประกาศ คพ. 2561 ข้อ 3 · ระดับ: สูง", helpEn: "[E-A02] อ้างอิง: ประกาศ คพ. 2561 ข้อ 3 · ระดับ: สูง", _code: "E-A02", _sev: "สูง" },
          { id: "q1-3", type: "passfail", required: true, requirePhoto: false, labelTh: "รถบรรทุกมีผ้าใบคลุมวัสดุ ไม่ให้ฝุ่นฟุ้งกระจาย", labelEn: "รถบรรทุกมีผ้าใบคลุมวัสดุ ไม่ให้ฝุ่นฟุ้งกระจาย", helpTh: "[E-A03] อ้างอิง: พรบ. รถยนต์ / คพ. · ระดับ: สูง", helpEn: "[E-A03] อ้างอิง: พรบ. รถยนต์ / คพ. · ระดับ: สูง", _code: "E-A03", _sev: "สูง" },
          { id: "q1-4", type: "passfail", required: true, requirePhoto: true, labelTh: "จุดล้างล้อรถบรรทุกก่อนออกจากไซต์ ใช้งานได้จริง", labelEn: "จุดล้างล้อรถบรรทุกก่อนออกจากไซต์ ใช้งานได้จริง", helpTh: "[E-A04] อ้างอิง: ประกาศ คพ. 2561 ข้อ 4 · ระดับ: วิกฤต", helpEn: "[E-A04] อ้างอิง: ประกาศ คพ. 2561 ข้อ 4 · ระดับ: วิกฤต", _code: "E-A04", _sev: "วิกฤต" },
          { id: "q1-5", type: "passfail", required: true, requirePhoto: true, labelTh: "ค่าฝุ่นรวม PM10 ≤ 120 ไมโครกรัม/ลบ.ม. (วัดรายไตรมาส)", labelEn: "ค่าฝุ่นรวม PM10 ≤ 120 ไมโครกรัม/ลบ.ม. (วัดรายไตรมาส)", helpTh: "[E-A05] อ้างอิง: มาตรฐาน คพ. 2563 · ระดับ: วิกฤต", helpEn: "[E-A05] อ้างอิง: มาตรฐาน คพ. 2563 · ระดับ: วิกฤต", _code: "E-A05", _sev: "วิกฤต" },
          { id: "q1-6", type: "passfail", required: true, requirePhoto: false, labelTh: "PM2.5 ≤ 37.5 ไมโครกรัม/ลบ.ม. (รายงานทุก 3 เดือน)", labelEn: "PM2.5 ≤ 37.5 ไมโครกรัม/ลบ.ม. (รายงานทุก 3 เดือน)", helpTh: "[E-A06] อ้างอิง: มาตรฐาน คพ. 2563 · ระดับ: สูง", helpEn: "[E-A06] อ้างอิง: มาตรฐาน คพ. 2563 · ระดับ: สูง", _code: "E-A06", _sev: "สูง" }
        ] },
      { id: "s2", nameTh: "การควบคุมเสียง", nameEn: "Section B",
        descTh: "หมวด B · 5 รายการ", descEn: "Section B · 5 items",
        questions: [
          { id: "q2-1", type: "passfail", required: true, requirePhoto: true, labelTh: "ระดับเสียงรอบไซต์ไม่เกิน 70 dB(A) กลางวัน / 55 dB(A) กลางคืน", labelEn: "ระดับเสียงรอบไซต์ไม่เกิน 70 dB(A) กลางวัน / 55 dB(A) กลางคืน", helpTh: "[E-B01] อ้างอิง: ประกาศ คพ. 2539 · ระดับ: วิกฤต", helpEn: "[E-B01] อ้างอิง: ประกาศ คพ. 2539 · ระดับ: วิกฤต", _code: "E-B01", _sev: "วิกฤต" },
          { id: "q2-2", type: "passfail", required: true, requirePhoto: true, labelTh: "งานที่มีเสียงดังทำในช่วงเวลา 07:00–20:00 น. เท่านั้น", labelEn: "งานที่มีเสียงดังทำในช่วงเวลา 07:00–20:00 น. เท่านั้น", helpTh: "[E-B02] อ้างอิง: ประกาศ กทม./เทศบาล · ระดับ: วิกฤต", helpEn: "[E-B02] อ้างอิง: ประกาศ กทม./เทศบาล · ระดับ: วิกฤต", _code: "E-B02", _sev: "วิกฤต" },
          { id: "q2-3", type: "passfail", required: true, requirePhoto: false, labelTh: "เครื่องจักรและเครื่องมือเสียงดังมีอุปกรณ์ลดเสียง (Silencer/Muffler)", labelEn: "เครื่องจักรและเครื่องมือเสียงดังมีอุปกรณ์ลดเสียง (Silencer/Muffler)", helpTh: "[E-B03] อ้างอิง: ประกาศ คพ. 2539 · ระดับ: สูง", helpEn: "[E-B03] อ้างอิง: ประกาศ คพ. 2539 · ระดับ: สูง", _code: "E-B03", _sev: "สูง" },
          { id: "q2-4", type: "passfail", required: true, requirePhoto: false, labelTh: "คนงานที่รับเสียง >80 dB(A) สวม Ear Protection", labelEn: "คนงานที่รับเสียง >80 dB(A) สวม Ear Protection", helpTh: "[E-B04] อ้างอิง: กฎกระทรวง 2565 ข้อ 6 · ระดับ: สูง", helpEn: "[E-B04] อ้างอิง: กฎกระทรวง 2565 ข้อ 6 · ระดับ: สูง", _code: "E-B04", _sev: "สูง" },
          { id: "q2-5", type: "passfail", required: true, requirePhoto: false, labelTh: "บันทึกผลการตรวจวัดเสียงรายไตรมาส ส่ง สผ./คพ.", labelEn: "บันทึกผลการตรวจวัดเสียงรายไตรมาส ส่ง สผ./คพ.", helpTh: "[E-B05] อ้างอิง: EIA Conditions · ระดับ: สูง", helpEn: "[E-B05] อ้างอิง: EIA Conditions · ระดับ: สูง", _code: "E-B05", _sev: "สูง" }
        ] },
      { id: "s3", nameTh: "น้ำเสียและของเสีย", nameEn: "Section C",
        descTh: "หมวด C · 6 รายการ", descEn: "Section C · 6 items",
        questions: [
          { id: "q3-1", type: "passfail", required: true, requirePhoto: true, labelTh: "บ่อดักตะกอน (Settling Pond) ก่อนระบายน้ำออกจากไซต์", labelEn: "บ่อดักตะกอน (Settling Pond) ก่อนระบายน้ำออกจากไซต์", helpTh: "[E-C01] อ้างอิง: ประกาศ คพ. 2561 ข้อ 7 · ระดับ: วิกฤต", helpEn: "[E-C01] อ้างอิง: ประกาศ คพ. 2561 ข้อ 7 · ระดับ: วิกฤต", _code: "E-C01", _sev: "วิกฤต" },
          { id: "q3-2", type: "passfail", required: true, requirePhoto: true, labelTh: "น้ำที่ระบายออกค่า SS ≤ 150 มก./ล. pH 5.5–9.0", labelEn: "น้ำที่ระบายออกค่า SS ≤ 150 มก./ล. pH 5.5–9.0", helpTh: "[E-C02] อ้างอิง: มาตรฐานน้ำทิ้ง คพ. 2553 · ระดับ: วิกฤต", helpEn: "[E-C02] อ้างอิง: มาตรฐานน้ำทิ้ง คพ. 2553 · ระดับ: วิกฤต", _code: "E-C02", _sev: "วิกฤต" },
          { id: "q3-3", type: "passfail", required: true, requirePhoto: true, labelTh: "น้ำมันและสารเคมีเก็บในพื้นที่กั้น (Bunded Area) ป้องกันรั่ว", labelEn: "น้ำมันและสารเคมีเก็บในพื้นที่กั้น (Bunded Area) ป้องกันรั่ว", helpTh: "[E-C03] อ้างอิง: ประกาศ คพ. 2561 ข้อ 8 · ระดับ: วิกฤต", helpEn: "[E-C03] อ้างอิง: ประกาศ คพ. 2561 ข้อ 8 · ระดับ: วิกฤต", _code: "E-C03", _sev: "วิกฤต" },
          { id: "q3-4", type: "passfail", required: true, requirePhoto: false, labelTh: "กากของแข็งแยกประเภท (ทั่วไป/อันตราย) ทิ้งในจุดที่กำหนด", labelEn: "กากของแข็งแยกประเภท (ทั่วไป/อันตราย) ทิ้งในจุดที่กำหนด", helpTh: "[E-C04] อ้างอิง: พรบ. สิ่งแวดล้อม 2535 · ระดับ: สูง", helpEn: "[E-C04] อ้างอิง: พรบ. สิ่งแวดล้อม 2535 · ระดับ: สูง", _code: "E-C04", _sev: "สูง" },
          { id: "q3-5", type: "passfail", required: true, requirePhoto: true, labelTh: "ผู้รับขนของเสียอันตรายมีใบอนุญาตจาก คพ.", labelEn: "ผู้รับขนของเสียอันตรายมีใบอนุญาตจาก คพ.", helpTh: "[E-C05] อ้างอิง: พรบ. วัตถุอันตราย 2535 · ระดับ: วิกฤต", helpEn: "[E-C05] อ้างอิง: พรบ. วัตถุอันตราย 2535 · ระดับ: วิกฤต", _code: "E-C05", _sev: "วิกฤต" },
          { id: "q3-6", type: "passfail", required: true, requirePhoto: true, labelTh: "ห้ามเผาขยะหรือวัสดุเหลือใช้ในไซต์ทุกกรณี", labelEn: "ห้ามเผาขยะหรือวัสดุเหลือใช้ในไซต์ทุกกรณี", helpTh: "[E-C06] อ้างอิง: ประกาศ คพ. 2561 ข้อ 9 · ระดับ: วิกฤต", helpEn: "[E-C06] อ้างอิง: ประกาศ คพ. 2561 ข้อ 9 · ระดับ: วิกฤต", _code: "E-C06", _sev: "วิกฤต" }
        ] },
      { id: "s4", nameTh: "การปกป้องต้นไม้และพื้นที่สีเขียว", nameEn: "Section D",
        descTh: "หมวด D · 3 รายการ", descEn: "Section D · 3 items",
        questions: [
          { id: "q4-1", type: "passfail", required: true, requirePhoto: false, labelTh: "ต้นไม้ที่กำหนดอนุรักษ์ในแบบ มีรั้วป้องกันรัศมี Drip Line", labelEn: "ต้นไม้ที่กำหนดอนุรักษ์ในแบบ มีรั้วป้องกันรัศมี Drip Line", helpTh: "[E-D01] อ้างอิง: EIA Conditions · ระดับ: สูง", helpEn: "[E-D01] อ้างอิง: EIA Conditions · ระดับ: สูง", _code: "E-D01", _sev: "สูง" },
          { id: "q4-2", type: "passfail", required: true, requirePhoto: false, labelTh: "การปลูกทดแทน (ถ้ามีการโค่น) ครบตามจำนวน EIA กำหนด", labelEn: "การปลูกทดแทน (ถ้ามีการโค่น) ครบตามจำนวน EIA กำหนด", helpTh: "[E-D02] อ้างอิง: EIA Conditions · ระดับ: สูง", helpEn: "[E-D02] อ้างอิง: EIA Conditions · ระดับ: สูง", _code: "E-D02", _sev: "สูง" },
          { id: "q4-3", type: "passfail", required: false, requirePhoto: false, labelTh: "ป้องกันการชะล้างหน้าดินในฤดูฝน (Erosion Control Fabric/Silt Fence)", labelEn: "ป้องกันการชะล้างหน้าดินในฤดูฝน (Erosion Control Fabric/Silt Fence)", helpTh: "[E-D03] อ้างอิง: ประกาศ คพ. 2561 · ระดับ: กลาง", helpEn: "[E-D03] อ้างอิง: ประกาศ คพ. 2561 · ระดับ: กลาง", _code: "E-D03", _sev: "กลาง" }
        ] },
      { id: "s5", nameTh: "การรายงานและการติดตาม", nameEn: "Section E",
        descTh: "หมวด E · 5 รายการ", descEn: "Section E · 5 items",
        questions: [
          { id: "q5-1", type: "passfail", required: true, requirePhoto: true, labelTh: "รายงาน EIA Monitoring ส่ง สผ. ทุก 6 เดือน ครบกำหนด", labelEn: "รายงาน EIA Monitoring ส่ง สผ. ทุก 6 เดือน ครบกำหนด", helpTh: "[E-E01] อ้างอิง: พรบ. สิ่งแวดล้อม 2535 มาตรา 51 · ระดับ: วิกฤต", helpEn: "[E-E01] อ้างอิง: พรบ. สิ่งแวดล้อม 2535 มาตรา 51 · ระดับ: วิกฤต", _code: "E-E01", _sev: "วิกฤต" },
          { id: "q5-2", type: "passfail", required: true, requirePhoto: false, labelTh: "ป้ายแสดงข้อมูลโครงการและเบอร์ร้องเรียนติดที่หน้าไซต์", labelEn: "ป้ายแสดงข้อมูลโครงการและเบอร์ร้องเรียนติดที่หน้าไซต์", helpTh: "[E-E02] อ้างอิง: EIA Conditions / กทม. · ระดับ: สูง", helpEn: "[E-E02] อ้างอิง: EIA Conditions / กทม. · ระดับ: สูง", _code: "E-E02", _sev: "สูง" },
          { id: "q5-3", type: "passfail", required: true, requirePhoto: false, labelTh: "บันทึกข้อร้องเรียนและมาตรการแก้ไขครบถ้วน", labelEn: "บันทึกข้อร้องเรียนและมาตรการแก้ไขครบถ้วน", helpTh: "[E-E03] อ้างอิง: EIA Conditions · ระดับ: สูง", helpEn: "[E-E03] อ้างอิง: EIA Conditions · ระดับ: สูง", _code: "E-E03", _sev: "สูง" },
          { id: "q5-4", type: "passfail", required: false, requirePhoto: false, labelTh: "การประชุมชี้แจงชุมชน ≥ 1 ครั้ง/ปี บันทึกและรายงานแล้ว", labelEn: "การประชุมชี้แจงชุมชน ≥ 1 ครั้ง/ปี บันทึกและรายงานแล้ว", helpTh: "[E-E04] อ้างอิง: EIA Conditions · ระดับ: กลาง", helpEn: "[E-E04] อ้างอิง: EIA Conditions · ระดับ: กลาง", _code: "E-E04", _sev: "กลาง" },
          { id: "q5-5", type: "passfail", required: false, requirePhoto: false, labelTh: "รายงาน Carbon Footprint และมาตรการลดการปล่อย GHG (โครงการ LEED/TREES)", labelEn: "รายงาน Carbon Footprint และมาตรการลดการปล่อย GHG (โครงการ LEED/TREES)", helpTh: "[E-E05] อ้างอิง: LEED v4 / TREES · ระดับ: กลาง", helpEn: "[E-E05] อ้างอิง: LEED v4 / TREES · ระดับ: กลาง", _code: "E-E05", _sev: "กลาง" }
        ] }
    ]
  }
];

window.CK_QTYPES = [
  { id:"text",      iconPath:"M4 6h16M4 12h10M4 18h16" },
  { id:"longtext",  iconPath:"M4 6h16M4 10h16M4 14h16M4 18h10" },
  { id:"number",    iconPath:"M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" },
  { id:"radio",     iconPath:"M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 6a4 4 0 1 0 4 4 4 4 0 0 0-4-4z" },
  { id:"checkbox",  iconPath:"M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" },
  { id:"passfail",  iconPath:"M20 6 9 17l-5-5M22 4 12 14M14 14l4 4" },
  { id:"photo",     iconPath:"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2zM12 17a4 4 0 1 0-4-4 4 4 0 0 0 4 4z" },
  { id:"date",      iconPath:"M19 4H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM16 2v4M8 2v4M3 10h18" },
  { id:"signature", iconPath:"M3 17v3h3l11-11-3-3L3 17zM14 6l3 3" },
  { id:"color",     iconPath:"M12 22a10 10 0 0 1-10-10A10 10 0 0 1 12 2c5.5 0 10 4.5 10 10 0 2-1 4-3 4h-2c-1.1 0-2 .9-2 2 0 1.6.9 2.6.9 4 0 0-1.2 0-3.9 0z" }
];

window.CK_ROLES = window.SUB_ROLES;
</script>

<!-- CK App -->
<script type="text/babel">
const { useState, useMemo, useEffect, useRef } = React;

const CIco = ({ d, size = 16, fill = "none" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={d}/></svg>
);
const IcPlus = (p) => <CIco {...p} d="M12 5v14M5 12h14" />;
const IcCheck = (p) => <CIco {...p} d="M20 6 9 17l-5-5" />;
const IcTrash = (p) => <CIco {...p} d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />;
const IcEye   = (p) => <CIco {...p} d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12zM12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z" />;
const IcClose = (p) => <CIco {...p} d="M18 6 6 18M6 6l12 12" />;
const IcChev  = (p) => <CIco {...p} d="M6 9l6 6 6-6" />;
const IcLink  = (p) => <CIco {...p} d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1" />;
const IcSparkle = (p) => <CIco {...p} d="m12 3 1.9 5.5L19 11l-5.1 2.5L12 19l-1.9-5.5L5 11l5.1-2.5z" />;
const IcDup   = (p) => <CIco {...p} d="M20 14H10a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2zM4 8v12a2 2 0 0 0 2 2h12" />;

function CkToast({msg}){if(!msg)return null;return <div className="ck-toast"><span className="ck-toast-ico"><IcCheck size={14}/></span>{msg}</div>}

function CkTopBar({lang,setLang,T,projects,projectId,setProjectId}){
  return (
    <header className="ck-topbar">
      <div className="ck-brand">
        <div className="ck-brand-logo">CQ</div>
        <div>
          <div className="ck-brand-name">ConstructQ</div>
          <div className="ck-brand-meta">{T.crumb[0]}</div>
        </div>
      </div>
      <div className="ck-top-actions">
        <span className="ck-avatar">วศ</span>
      </div>
    </header>
  );
}

function CkProjectPicker({T, projects, projectId, setProjectId}){
  return (
    <div className="ck-page-projpick">
      <span className="ck-pick-label"><IcLink size={12}/> {T.project}</span>
      <select className="ck-pick-select" value={projectId} onChange={e=>setProjectId(e.target.value)}>
        {projects.map(p=><option key={p.id} value={p.id}>{p.code} · {p.name}</option>)}
      </select>
    </div>
  );
}

function CkSidebar({T,checklists,activeId,setActiveId,onNew,onTemplate,lang}){
  return (
    <aside className="ck-sidebar-card">
      <div className="ck-sidebar-head">
        <div>
          <div className="ck-sidebar-title">📋 {T.sidebar.title}</div>
          <div className="ck-sidebar-count">{T.sidebar.count(checklists.length)}</div>
        </div>
      </div>
      {checklists.length===0 ? <div className="ck-side-empty">{T.sidebar.empty}</div>
        : <div className="ck-side-list">
            {checklists.map(c=>{
              const qCount=c.sections.reduce((a,s)=>a+s.questions.length,0);
              return (
                <button key={c.id} className={"ck-side-item "+(c.id===activeId?"on":"")} onClick={()=>setActiveId(c.id)}>
                  <div className="ck-side-item-top">
                    <span className="ck-side-name">{lang==="th"?c.nameTh:c.nameEn}</span>
                    <span className={"ck-status-pill "+c.status}>{T.status[c.status]}</span>
                  </div>
                  <div className="ck-side-item-bot">
                    <span>WBS {c.wbsCode}</span><span>·</span>
                    <span>{c.sections.length} {T.meta.stats.sections}</span><span>·</span>
                    <span>{qCount} {T.meta.stats.questions}</span>
                  </div>
                </button>
              );
            })}
          </div>}
    </aside>
  );
}

function Stat({n,label,color}){
  return <div className={"ck-stat "+color}><div className="ck-stat-n">{n}</div><div className="ck-stat-l">{label}</div></div>;
}

function QuestionTypePicker({T,lang,onPick}){
  return (
    <div className="ck-type-picker">
      <div className="ck-type-picker-title">{T.qEdit.pickType}</div>
      <div className="ck-type-grid">
        {window.CK_QTYPES.map(t=>(
          <button key={t.id} className="ck-type-card" onClick={()=>onPick(t.id)}>
            <span className="ck-type-ico"><CIco d={t.iconPath} size={16}/></span>
            <span className="ck-type-name">{T.qTypes[t.id]?.name}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

// v7.0 — Central criteria evaluator · returns { verdict, reason }
//        verdict: 'pass' | 'warn' | 'fail' | 'none'
function ckEvaluate(q, raw, T) {
  const c = q.criteria || {};
  const op = c.operator || 'none';
  const v = raw;
  if (op === 'none') return { verdict: 'none', reason: T?.preview?.verdictNone || 'No criteria' };
  if (op === 'manual') return { verdict: 'none', reason: 'Manual judgment required' };
  if (v === '' || v === null || v === undefined) return { verdict: 'none', reason: '' };
  const num = Number(v);
  const isNum = !isNaN(num);
  if (op === 'range') {
    if (!isNum) return { verdict: 'fail', reason: 'Not a number' };
    if (c.min !== '' && num < Number(c.min)) return { verdict: 'fail', reason: T?.preview?.reasonBelow?.(num, c.min) || `Below min` };
    if (c.max !== '' && num > Number(c.max)) return { verdict: 'fail', reason: T?.preview?.reasonAbove?.(num, c.max) || `Above max` };
    if (c.warnBelow !== '' && c.warnBelow != null && num < Number(c.warnBelow)) return { verdict: 'warn', reason: T?.preview?.reasonWarnBelow?.(num, c.warnBelow) || `Warning: below warn` };
    if (c.warnAbove !== '' && c.warnAbove != null && num > Number(c.warnAbove)) return { verdict: 'warn', reason: T?.preview?.reasonWarnAbove?.(num, c.warnAbove) || `Warning: above warn` };
    return { verdict: 'pass', reason: T?.preview?.reasonInRange || 'Within range' };
  }
  if (op === 'ge') {
    if (!isNum) return { verdict: 'fail', reason: 'Not a number' };
    if (num < Number(c.min)) return { verdict: 'fail', reason: T?.preview?.reasonBelow?.(num, c.min) || `Below min` };
    return { verdict: 'pass', reason: T?.preview?.reasonInRange || 'OK' };
  }
  if (op === 'le') {
    if (!isNum) return { verdict: 'fail', reason: 'Not a number' };
    if (num > Number(c.max)) return { verdict: 'fail', reason: T?.preview?.reasonAbove?.(num, c.max) || `Above max` };
    return { verdict: 'pass', reason: T?.preview?.reasonInRange || 'OK' };
  }
  if (op === 'eq') {
    if (!isNum) return { verdict: 'fail', reason: 'Not a number' };
    const tol = Number(c.tolerance || 0);
    if (Math.abs(num - Number(c.expected)) > tol) return { verdict: 'fail', reason: T?.preview?.reasonEq?.(num, c.expected, tol) || `Differs from expected` };
    return { verdict: 'pass', reason: T?.preview?.reasonInRange || 'Matches expected' };
  }
  if (op === 'in_list') {
    const list = Array.isArray(c.acceptable) ? c.acceptable : String(c.acceptable || '').split(',').map(x => x.trim()).filter(Boolean);
    const value = String(v).trim();
    if (list.includes(value)) return { verdict: 'pass', reason: T?.preview?.reasonInPass?.(value) || `Accepted` };
    return { verdict: 'fail', reason: T?.preview?.reasonNotIn?.(value) || `Not accepted` };
  }
  return { verdict: 'none', reason: '' };
}

// v7.0 — Format criteria preview text (shown in QuestionConfig)
function ckCriteriaPreview(q, T) {
  const c = q.criteria || {};
  const op = c.operator || 'none';
  const unit = q.unit ? ` ${q.unit}` : '';
  if (op === 'none' || op === 'manual') return T?.qEdit?.opNone || 'No auto-judgment';
  if (op === 'range') return `${c.min ?? '—'} ≤ x ≤ ${c.max ?? '—'}${unit}`;
  if (op === 'ge') return `x ≥ ${c.min ?? '—'}${unit}`;
  if (op === 'le') return `x ≤ ${c.max ?? '—'}${unit}`;
  if (op === 'eq') return `x = ${c.expected ?? '—'} ± ${c.tolerance ?? 0}${unit}`;
  if (op === 'in_list') {
    const list = Array.isArray(c.acceptable) ? c.acceptable : String(c.acceptable || '').split(',').map(x => x.trim()).filter(Boolean);
    return `x ∈ {${list.slice(0, 3).join(', ')}${list.length > 3 ? '...' : ''}}`;
  }
  return '';
}

// v7.0 — Criteria editor UI · used inside QuestionConfig for number/color/radio/checkbox/passfail
function CriteriaEditor({q, upd, T, lang}) {
  const c = q.criteria || {};
  const setC = (patch) => upd({ criteria: { ...(q.criteria || {}), ...patch } });
  const op = c.operator || 'none';
  const isNumericOp = ['range', 'ge', 'le', 'eq'].includes(op);
  const isNumericType = q.type === 'number';
  const showListEditor = op === 'in_list' || q.type === 'radio' || q.type === 'checkbox';
  // Determine available operators by question type
  let availOps;
  if (q.type === 'number' || q.type === 'color') availOps = ['none', 'range', 'ge', 'le', 'eq', 'manual'];
  else if (q.type === 'radio' || q.type === 'checkbox') availOps = ['none', 'in_list', 'manual'];
  else if (q.type === 'passfail') availOps = ['none', 'manual'];
  else availOps = ['none', 'manual'];
  const opLabel = {none:T.qEdit.opNone,range:T.qEdit.opRange,ge:T.qEdit.opGe,le:T.qEdit.opLe,eq:T.qEdit.opEq,in_list:T.qEdit.opInList,manual:T.qEdit.opManual};

  return (
    <div className="ck-crit">
      <div className="ck-crit-title">{T.qEdit.criteriaTitle}</div>
      <div className="ck-crit-hint">{T.qEdit.criteriaHint}</div>
      <div className="ck-crit-grid-2">
        <label className="ck-crit-field">
          <span>{T.qEdit.operator}</span>
          <select value={op} onChange={e=>setC({operator:e.target.value})}>
            {availOps.map(x => <option key={x} value={x}>{opLabel[x]}</option>)}
          </select>
        </label>
        <label className="ck-crit-field">
          <span>{T.qEdit.onFail}</span>
          <select value={c.onFail||'none'} onChange={e=>setC({onFail:e.target.value})}>
            <option value="none">{T.qEdit.onFailNone}</option>
            <option value="flag">{T.qEdit.onFailFlag}</option>
            <option value="auto_ncr">{T.qEdit.onFailNcr}</option>
          </select>
        </label>
      </div>
      {(op === 'range') && (
        <div className="ck-crit-grid" style={{marginTop:8}}>
          <label className="ck-crit-field"><span>{T.qEdit.min}</span>
            <input type="number" step="any" value={c.min ?? ''} onChange={e=>setC({min:e.target.value})} />
          </label>
          <label className="ck-crit-field"><span>{T.qEdit.max}</span>
            <input type="number" step="any" value={c.max ?? ''} onChange={e=>setC({max:e.target.value})} />
          </label>
          <label className="ck-crit-field"><span>{T.qEdit.severity}</span>
            <select value={c.severity||'major'} onChange={e=>setC({severity:e.target.value})}>
              <option value="minor">{T.qEdit.sevMinor}</option>
              <option value="major">{T.qEdit.sevMajor}</option>
              <option value="critical">{T.qEdit.sevCritical}</option>
            </select>
          </label>
          <label className="ck-crit-field"><span>{T.qEdit.warnBelow}</span>
            <input type="number" step="any" value={c.warnBelow ?? ''} onChange={e=>setC({warnBelow:e.target.value})} placeholder="—" />
          </label>
          <label className="ck-crit-field"><span>{T.qEdit.warnAbove}</span>
            <input type="number" step="any" value={c.warnAbove ?? ''} onChange={e=>setC({warnAbove:e.target.value})} placeholder="—" />
          </label>
        </div>
      )}
      {(op === 'ge' || op === 'le') && (
        <div className="ck-crit-grid-2" style={{marginTop:8}}>
          <label className="ck-crit-field"><span>{op === 'ge' ? T.qEdit.min : T.qEdit.max}</span>
            <input type="number" step="any"
              value={op === 'ge' ? (c.min ?? '') : (c.max ?? '')}
              onChange={e=>setC(op === 'ge' ? {min:e.target.value} : {max:e.target.value})} />
          </label>
          <label className="ck-crit-field"><span>{T.qEdit.severity}</span>
            <select value={c.severity||'major'} onChange={e=>setC({severity:e.target.value})}>
              <option value="minor">{T.qEdit.sevMinor}</option>
              <option value="major">{T.qEdit.sevMajor}</option>
              <option value="critical">{T.qEdit.sevCritical}</option>
            </select>
          </label>
        </div>
      )}
      {(op === 'eq') && (
        <div className="ck-crit-grid" style={{marginTop:8}}>
          <label className="ck-crit-field"><span>{T.qEdit.expected}</span>
            <input type="number" step="any" value={c.expected ?? ''} onChange={e=>setC({expected:e.target.value})} />
          </label>
          <label className="ck-crit-field"><span>{T.qEdit.tolerance}</span>
            <input type="number" step="any" value={c.tolerance ?? ''} onChange={e=>setC({tolerance:e.target.value})} placeholder="0" />
          </label>
          <label className="ck-crit-field"><span>{T.qEdit.severity}</span>
            <select value={c.severity||'major'} onChange={e=>setC({severity:e.target.value})}>
              <option value="minor">{T.qEdit.sevMinor}</option>
              <option value="major">{T.qEdit.sevMajor}</option>
              <option value="critical">{T.qEdit.sevCritical}</option>
            </select>
          </label>
        </div>
      )}
      {(op === 'in_list') && (
        <div style={{marginTop:8}}>
          <label className="ck-crit-field"><span>{T.qEdit.acceptable}</span>
            <input value={Array.isArray(c.acceptable)?c.acceptable.join(', '):(c.acceptable||'')}
              onChange={e=>setC({acceptable:e.target.value.split(',').map(x=>x.trim()).filter(Boolean)})}
              placeholder="Grade 30, Grade 35, Grade 40" />
          </label>
        </div>
      )}
      {op !== 'none' && op !== 'manual' && (
        <div className="ck-crit-preview">
          <span className="lbl">{T.qEdit.criteriaPreview}</span>
          {ckCriteriaPreview(q, T)}
        </div>
      )}
    </div>
  );
}

function QuestionConfig({q,upd,T,lang}){
  if(q.type==="number") return (
    <>
      <div className="ck-q-config-row">
        <label className="ck-q-config-field">
          <span>{T.qEdit.unit}</span>
          <input className="ck-input" list="ck-unit-suggestions" value={q.unit||""} onChange={e=>upd({unit:e.target.value})} placeholder="mm, cm, mils, ksc, °C, MPa, %, ΔE" />
          <datalist id="ck-unit-suggestions">
            <option value="mm"/><option value="cm"/><option value="m"/><option value="mils"/><option value="ksc"/><option value="MPa"/><option value="°C"/><option value="%"/><option value="ΔE"/><option value="kg"/><option value="ppm"/><option value="dB"/><option value="N"/><option value="kN"/><option value="Ω"/><option value="V"/><option value="A"/>
          </datalist>
        </label>
      </div>
      <CriteriaEditor q={q} upd={upd} T={T} lang={lang} />
    </>
  );
  if(q.type==="radio"||q.type==="checkbox"){
    const opts=(q.options&&q.options[lang])||(q.type==="radio"?(lang==="th"?["ใช่","ไม่","อื่นๆ"]:["Yes","No","Other"]):[]);
    const setOpts=(next)=>upd({options:{...(q.options||{}),[lang]:next}});
    return (
      <div className="ck-q-config">
        <span className="ck-q-config-label">{T.qEdit.options}</span>
        <div className="ck-options-list">
          {opts.map((o,i)=>(
            <div key={i} className="ck-option-row">
              <span className="ck-option-marker">{q.type==="radio"?"◯":"☐"}</span>
              <input className="ck-input" value={o} onChange={e=>setOpts(opts.map((x,idx)=>idx===i?e.target.value:x))} placeholder={T.optionPh(i+1)} />
              <button className="ck-icon-btn ghost-sm" onClick={()=>setOpts(opts.filter((_,idx)=>idx!==i))}><IcClose size={12}/></button>
            </div>
          ))}
          <button className="ck-add-option" onClick={()=>setOpts([...opts,""])}><IcPlus size={12}/> {T.btnAddOption}</button>
        </div>
        <CriteriaEditor q={q} upd={upd} T={T} lang={lang} />
      </div>
    );
  }
  if(q.type==="photo") return (
    <div className="ck-q-config-row">
      <label className="ck-q-config-field">
        <span>{T.qEdit.minPhotos}</span>
        <input type="number" min="1" className="ck-input" value={q.minPhotos||1} onChange={e=>upd({minPhotos:parseInt(e.target.value)||1})} />
      </label>
    </div>
  );
  if(q.type==="passfail" || q.type==="color") return <CriteriaEditor q={q} upd={upd} T={T} lang={lang} />;
  return null;
}

function QuestionEditor({q,qIdx,T,lang,onChange,onDelete,onDuplicate}){
  const type=window.CK_QTYPES.find(x=>x.id===q.type);
  const upd=(patch)=>onChange({...q,...patch});
  return (
    <div className="ck-q">
      <div className="ck-q-rail">
        <span className="ck-q-num">{T.qIndex(qIdx+1)}</span>
        <span className="ck-q-type">
          <CIco d={type?.iconPath||""} size={14}/>
          {T.qTypes[q.type]?.name||q.type}
        </span>
      </div>
      <div className="ck-q-body">
        <input className="ck-q-label" value={lang==="th"?(q.labelTh||""):(q.labelEn||"")}
          placeholder={lang==="th"?T.qEdit.labelTh:T.qEdit.labelEn}
          onChange={e=>upd(lang==="th"?{labelTh:e.target.value}:{labelEn:e.target.value})} />
        <input className="ck-q-help" value={lang==="th"?(q.helpTh||""):(q.helpEn||"")}
          placeholder={T.qEdit.help}
          onChange={e=>upd(lang==="th"?{helpTh:e.target.value}:{helpEn:e.target.value})} />
        <QuestionConfig q={q} upd={upd} T={T} lang={lang} />
        <div className="ck-q-foot">
          <label className="ck-toggle"><input type="checkbox" checked={!!q.required} onChange={e=>upd({required:e.target.checked})} /> <span>{T.qEdit.required}</span></label>
          {q.type!=="photo"&&q.type!=="signature" && (
            <label className="ck-toggle"><input type="checkbox" checked={!!q.requirePhoto} onChange={e=>upd({requirePhoto:e.target.checked})} /> <span>{T.qEdit.requirePhoto}</span></label>
          )}
        </div>
      </div>
      <div className="ck-q-actions">
        <button className="ck-icon-btn" onClick={onDuplicate} title={T.btnDuplicate}><IcDup size={13}/></button>
        <button className="ck-icon-btn danger" onClick={onDelete} title={T.btnDelete}><IcTrash size={13}/></button>
      </div>
    </div>
  );
}

function newQuestion(type){
  const q={ id:"q"+Date.now()+Math.floor(Math.random()*100), type, required:false, labelTh:"", labelEn:"", helpTh:"", helpEn:"" };
  if(type==="number") { q.unit=""; q.criteria={operator:'none',onFail:'none',severity:'major'}; }
  if(type==="color") q.criteria={operator:'none',onFail:'none',severity:'minor'};
  if(type==="radio") { q.options={ th:["ใช่","ไม่","อื่นๆ"], en:["Yes","No","Other"] }; q.criteria={operator:'none',onFail:'none',severity:'major'}; }
  if(type==="checkbox") { q.options={ th:[""], en:[""] }; q.criteria={operator:'none',onFail:'none',severity:'minor'}; }
  if(type==="passfail") q.criteria={operator:'none',onFail:'none',severity:'major'};
  if(type==="photo") q.minPhotos=1;
  return q;
}

function SectionEditor({section,sIdx,T,lang,onChange,onDelete,notify,collapsed,onToggleCollapsed}){
  // v5.0 · collapsed can be controlled by parent · fallback to local state if not provided
  const [localCollapsed,setLocalCollapsed]=useState(false);
  const isControlled = typeof collapsed === 'boolean';
  const effectiveCollapsed = isControlled ? collapsed : localCollapsed;
  const setCollapsed = isControlled ? (fn) => onToggleCollapsed?.(typeof fn === 'function' ? fn(collapsed) : fn) : setLocalCollapsed;
  const updQ=(qIdx,next)=>onChange({...section,questions:section.questions.map((x,i)=>i===qIdx?next:x)});
  const delQ=(qIdx)=>{onChange({...section,questions:section.questions.filter((_,i)=>i!==qIdx)});notify(T.toast.qDeleted)};
  const dupQ=(qIdx)=>{
    const q=section.questions[qIdx];
    const copy={...q,id:"q"+Date.now()};
    onChange({...section,questions:[...section.questions.slice(0,qIdx+1),copy,...section.questions.slice(qIdx+1)]});
  };
  const addQ=(type)=>{onChange({...section,questions:[...section.questions,newQuestion(type)]});notify(T.toast.qAdded)};

  return (
    <div className="ck-section">
      <div className="ck-section-head">
        <button className="ck-collapse" onClick={()=>setCollapsed(c=>!c)}>
          <div className={"ck-collapse-ico "+(effectiveCollapsed?"":"open")}><IcChev size={14}/></div>
        </button>
        <span className="ck-section-num">{String(sIdx+1).padStart(2,"0")}</span>
        <div style={{flex:1}}>
          <input className="ck-section-title" value={lang==="th"?section.nameTh:section.nameEn}
            placeholder={lang==="th"?T.section.titleTh:T.section.titleEn}
            onChange={e=>onChange(lang==="th"?{...section,nameTh:e.target.value}:{...section,nameEn:e.target.value})} />
          <input className="ck-section-desc" value={lang==="th"?(section.descTh||""):(section.descEn||"")}
            placeholder={T.section.desc}
            onChange={e=>onChange(lang==="th"?{...section,descTh:e.target.value}:{...section,descEn:e.target.value})} />
        </div>
        <button className="ck-icon-btn danger" onClick={onDelete}><IcTrash size={14}/></button>
      </div>
      {!effectiveCollapsed && (
        <>
          {section.questions.length===0
            ? <div className="ck-q-empty">{T.section.noQ}</div>
            : <div className="ck-questions">
                {section.questions.map((q,qIdx)=>(
                  <QuestionEditor key={q.id} q={q} qIdx={qIdx} T={T} lang={lang}
                    onChange={(next)=>updQ(qIdx,next)} onDelete={()=>delQ(qIdx)} onDuplicate={()=>dupQ(qIdx)} />
                ))}
              </div>}
          <QuestionTypePicker T={T} lang={lang} onPick={addQ} />
        </>
      )}
    </div>
  );
}

function CkEditor({T,lang,project,checklist,update,onDuplicate,onDelete,onPublish,onPreview,notify,onSaveConfirm}){
  // v5.0 · collapsed sections state (Set of section IDs)
  const [collapsedIds,setCollapsedIds]=useState(new Set());
  const expandAll=()=>setCollapsedIds(new Set());
  const collapseAll=()=>{
    if (!checklist?.sections) return;
    setCollapsedIds(new Set(checklist.sections.map(s=>s.id)));
  };
  const toggleCollapsed=(sid,next)=>{
    const s=new Set(collapsedIds);
    if (next) s.add(sid); else s.delete(sid);
    setCollapsedIds(s);
  };
  if(!checklist) return <div className="ck-empty-state"><div className="ck-empty-ico"><IcSparkle size={32}/></div><h3>{T.sidebar.empty}</h3></div>;
  const upd=(patch)=>update({...checklist,...patch});
  const stats=useMemo(()=>{
    const all=checklist.sections.flatMap(s=>s.questions);
    return { sections:checklist.sections.length, questions:all.length, required:all.filter(q=>q.required).length, withPhoto:all.filter(q=>q.requirePhoto||q.type==="photo").length };
  },[checklist]);
  const wbsItem=project.wbs.find(w=>w.code===checklist.wbsCode);

  return (
    <div className="ck-editor">
      <div className="ck-edit-head">
        <div className="ck-edit-head-row">
          <input className="ck-edit-title" value={lang==="th"?checklist.nameTh:checklist.nameEn}
            onChange={e=>upd(lang==="th"?{nameTh:e.target.value}:{nameEn:e.target.value})}
            placeholder={T.meta.name} />
          <div className="ck-edit-head-actions">
            <button className="ck-btn ghost" onClick={onPreview}><IcEye size={14}/> {T.btnPreview}</button>
            <button className="ck-btn ghost" onClick={onDuplicate}><IcDup size={14}/> {T.btnDuplicate}</button>
            <button className="ck-btn outline danger" onClick={onDelete}><IcTrash size={14}/> {T.btnDelete}</button>
            <button className="ck-btn primary" onClick={()=>onSaveConfirm?.(checklist.status==="published"?"save":"publish")}>
              <IcCheck size={14}/> {checklist.status==="published"?T.btnSave:T.btnPublish}
            </button>
          </div>
        </div>

        <div className="ck-stats">
          <Stat n={stats.sections} label={T.meta.stats.sections} color="brand" />
          <Stat n={stats.questions} label={T.meta.stats.questions} color="info" />
          <Stat n={stats.required} label={T.meta.stats.required} color="warning" />
          <Stat n={stats.withPhoto} label={T.meta.stats.withPhoto} color="success" />
        </div>

        {/* v6.0 — Expand/Collapse-all toolbar · under delete/save · aligned right */}
        <div className="ck-sec-toolbar">
          <span className="lbl">{lang==="th"?"หมวดหมู่":"Sections"}:</span>
          <button className="ck-btn sm-ghost" onClick={expandAll} title={T.btnExpandAll}>▾ {T.btnExpandAll}</button>
          <button className="ck-btn sm-ghost" onClick={collapseAll} title={T.btnCollapseAll}>▸ {T.btnCollapseAll}</button>
        </div>
      </div>

      <div className="ck-sections">
        {checklist.sections.map((s,sIdx)=>(
          <SectionEditor key={s.id} section={s} sIdx={sIdx} T={T} lang={lang}
            onChange={(next)=>upd({sections:checklist.sections.map((x,i)=>i===sIdx?next:x)})}
            onDelete={()=>{upd({sections:checklist.sections.filter((_,i)=>i!==sIdx)});notify(T.toast.sDeleted)}}
            notify={notify}
            collapsed={collapsedIds.has(s.id)}
            onToggleCollapsed={(next)=>toggleCollapsed(s.id,next)} />
        ))}
        <button className="ck-add-section" onClick={()=>{
          const newS={id:"s"+Date.now(),nameTh:"",nameEn:"",descTh:"",descEn:"",questions:[]};
          upd({sections:[...checklist.sections,newS]}); notify(T.toast.sAdded);
        }}>
          <IcPlus size={14}/> {T.btnAddSection}
        </button>
      </div>
    </div>
  );
}

/* v8.0 — live-preview HEX swatch for color type */
function PhoneColorInput({placeholder}){
  const [val, setVal] = useState('');
  const isHex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(val);
  const preview = isHex ? val : (placeholder || '#2BA8A2');
  return (
    <div className="ck-phone-color">
      <span className="ck-phone-color-chip" style={{background: preview}} aria-hidden></span>
      <input
        className="ck-phone-input"
        placeholder={placeholder}
        value={val}
        onChange={e=>setVal(e.target.value)}
        maxLength={7}
        spellCheck={false} />
    </div>
  );
}

function PhoneQuestion({q,qIdx,sIdx,T,lang}){
  const label=lang==="th"?q.labelTh:q.labelEn;
  const help=lang==="th"?q.helpTh:q.helpEn;
  const opts=q.options?.[lang]||[];
  // v7.0 — Simulator: try answer, live verdict
  const [simValue, setSimValue] = useState('');
  const criteriaOp = q.criteria?.operator || 'none';
  const showSim = criteriaOp !== 'none' && criteriaOp !== 'manual' && ['number','color','radio','checkbox','passfail'].includes(q.type);
  const verdict = showSim ? ckEvaluate(q, simValue, T) : null;
  return (
    <div className="ck-phone-q">
      <div className="ck-phone-q-label">{sIdx+1}.{qIdx+1} {label||"—"}{q.required && <span className="ck-req">*</span>}</div>
      {help && <div className="ck-phone-q-help">{help}</div>}
      {q.type==="text" && <input className="ck-phone-input" placeholder={T.qEdit.placeholder} />}
      {q.type==="longtext" && <textarea className="ck-phone-input" rows="2" placeholder={T.qEdit.placeholder}></textarea>}
      {q.type==="number" && <div className="ck-phone-input-row"><input className="ck-phone-input" type="number" inputMode="decimal" step="any" placeholder="0" /><span className="ck-phone-unit">{q.unit || "—"}</span></div>}
      {q.type==="color" && <PhoneColorInput placeholder="#2BA8A2" />}
      {q.type==="radio" && (
        <div className="ck-phone-radios">
          {opts.map((o,i)=><label key={i}><input type="radio" name={`q-${sIdx}-${qIdx}`} /> {o}</label>)}
        </div>
      )}
      {q.type==="checkbox" && (
        <div className="ck-phone-radios">
          {opts.map((o,i)=><label key={i}><input type="checkbox" /> {o}</label>)}
        </div>
      )}
      {q.type==="passfail" && (
        <div className="ck-phone-passfail">
          <button className="pass">✓ {T.preview.passLbl}</button>
          <button className="fail">✗ {T.preview.failLbl}</button>
        </div>
      )}
      {q.type==="photo" && (
        <button className="ck-phone-photo">📷 {T.preview.addPhoto} {q.minPhotos>1?`(${q.minPhotos}+)`:""}</button>
      )}
      {q.type==="date" && <input type="date" className="ck-phone-input" />}
      {q.type==="signature" && <div className="ck-phone-sig">✍ {T.preview.signHere}</div>}

      {/* v11.0 — Rule chip: show the compliance rule set for this item */}
      {showSim && (
        <div className="ck-phone-rule">
          <div className="ck-phone-rule-head">
            <span>{T.preview.ruleTitle}</span>
          </div>
          <div className="ck-phone-rule-body">{ckCriteriaPreview(q, T)}</div>
          <div className="ck-phone-rule-meta">
            {q.criteria?.onFail === "auto_ncr" && (
              <span className="ck-phone-rule-chip ncr">⚠ {T.preview.ruleAutoNcr}</span>
            )}
            {q.criteria?.onFail === "warn" && (
              <span className="ck-phone-rule-chip warn">🔶 {T.preview.ruleWarn}</span>
            )}
            {q.criteria?.severity === "critical" && (
              <span className="ck-phone-rule-chip sev-critical">🔴 {T.preview.sevCritical}</span>
            )}
            {q.criteria?.severity === "major" && (
              <span className="ck-phone-rule-chip sev-major">🟠 {T.preview.sevMajor}</span>
            )}
            {q.criteria?.severity === "minor" && (
              <span className="ck-phone-rule-chip sev-minor">🔵 {T.preview.sevMinor}</span>
            )}
          </div>
        </div>
      )}

      {/* v2.0 — Required comment + photo for EVERY item */}
      <div className="ck-phone-q-req">
        <div className="ck-phone-q-sub">
          <span className="lbl">💬 {T.preview.commentLabel}</span>
          <span className="ck-req-chip">★ {T.preview.required}</span>
        </div>
        <textarea className="ck-phone-input ck-phone-comment" rows="2" placeholder={T.preview.commentPh} required></textarea>
      </div>
      <div className="ck-phone-q-req">
        <div className="ck-phone-q-sub">
          <span className="lbl">📷 {T.preview.photoReqLabel}</span>
          <span className="ck-req-chip">★ {T.preview.required}</span>
        </div>
        <button className="ck-phone-photo ck-phone-photo-req">📷 {T.preview.photoChooseTh}</button>
      </div>
    </div>
  );
}

function MobilePreview({checklist,project,lang,T,onClose}){
  if(!checklist) return null;
  const all=checklist.sections.flatMap(s=>s.questions);
  return (
    <div className="ck-modal-bg" onClick={onClose}>
      <div className="ck-preview-wrap" onClick={e=>e.stopPropagation()}>
        <div className="ck-preview-head">
          <div>
            <div className="ck-preview-title">📱 {T.preview.title}</div>
            <div className="ck-preview-sub">{T.preview.sub}</div>
          </div>
          <button className="ck-icon-btn" onClick={onClose}><IcClose/></button>
        </div>
        <div className="ck-phone">
          <div className="ck-phone-notch"></div>
          <div className="ck-phone-screen">
            <div className="ck-phone-status"><span>9:41</span><span>•••</span></div>
            <div className="ck-phone-header">
              <span className="ck-phone-back">‹</span>
              <span className="ck-phone-h">{lang==="th"?checklist.nameTh:checklist.nameEn}</span>
            </div>
            <div className="ck-phone-meta">
              <div><span>WBS</span><b>{checklist.wbsCode}</b></div>
              <div><span>{T.project}</span><b style={{maxWidth:110,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",display:"inline-block",verticalAlign:"bottom"}}>{project.name.split("/")[0].trim()}</b></div>
            </div>
            <PhoneRunner checklist={checklist} T={T} lang={lang} />
          </div>
        </div>
      </div>
    </div>
  );
}

/* v8.0 — Tab strip + Stepper runner for Mobile Preview
   v13.0 · adds `answered` Set to track items that got a real answer */
function PhoneRunner({checklist, T, lang}){
  const sections = checklist.sections || [];
  const [tabIdx, setTabIdx] = useState(0);
  const [stepIdx, setStepIdx] = useState(0);
  const [answered, setAnswered] = useState(() => new Set());
  const curSection = sections[tabIdx];
  const items = curSection?.questions || [];
  const curQ = items[stepIdx];
  const answerKey = (s, q) => s + ":" + q;
  const markAnswered = () => {
    const k = answerKey(tabIdx, stepIdx);
    if (!answered.has(k)) {
      const next = new Set(answered); next.add(k); setAnswered(next);
    }
  };
  const totalQ = sections.reduce((a,s)=>a + (s.questions?.length||0), 0);
  const isLastTab = tabIdx === sections.length - 1;
  const isLastStep = stepIdx === items.length - 1;
  const isFinal = isLastTab && isLastStep;
  const goPrev = () => {
    if (stepIdx > 0) { setStepIdx(stepIdx - 1); return; }
    if (tabIdx > 0) {
      const prevSec = sections[tabIdx - 1];
      setTabIdx(tabIdx - 1);
      setStepIdx((prevSec.questions?.length || 1) - 1);
    }
  };
  const goNext = () => {
    if (!isLastStep) { setStepIdx(stepIdx + 1); return; }
    if (!isLastTab) { setTabIdx(tabIdx + 1); setStepIdx(0); }
  };
  const canPrev = tabIdx > 0 || stepIdx > 0;
  const globalIdx = sections.slice(0, tabIdx).reduce((a,s)=>a + (s.questions?.length||0), 0) + stepIdx + 1;
  const pct = totalQ > 0 ? Math.round(globalIdx / totalQ * 100) : 0;
  return (
    <>
      <div className="ck-phone-tabs" role="tablist" aria-label={T.preview.chooseTab}>
        {sections.map((s, i) => (
          <button key={s.id}
            className={"ck-phone-tab" + (i === tabIdx ? " on" : "")}
            onClick={() => { setTabIdx(i); setStepIdx(0); }}
            role="tab"
            aria-selected={i === tabIdx}>
            <span className="ck-phone-tab-n">{String(i+1).padStart(2,"0")}</span>
            <span>{lang === "th" ? s.nameTh : s.nameEn}</span>
          </button>
        ))}
      </div>
      <div className="ck-phone-tab-progress">
        <span>{globalIdx}/{totalQ}</span>
        <div className="bar"><i style={{width: pct + "%"}}/></div>
        <span>{pct}%</span>
      </div>
      {curSection && (
        <div className="ck-phone-stepper">
          <div className="ck-phone-stepper-top">
            <span className="ck-phone-stepper-title">{lang === "th" ? curSection.nameTh : curSection.nameEn}</span>
            <span className="ck-phone-stepper-count">{T.preview.stepOf(stepIdx+1, items.length)}</span>
          </div>
          <div className="ck-phone-stepper-dots" aria-hidden>
            {items.map((_, i) => {
              // v14.0 — answered flag is pinned across nav · current is a separate highlight
              const isCurrent = i === stepIdx;
              const isAnswered = answered.has(answerKey(tabIdx, i));
              const isPastUnanswered = i < stepIdx && !isAnswered;
              const cls = [
                "ck-phone-stepper-dot",
                isCurrent ? "on" : "",
                isAnswered ? "done" : "",
                isPastUnanswered ? "skipped" : ""
              ].filter(Boolean).join(" ");
              const nextAnswered = isAnswered && answered.has(answerKey(tabIdx, i + 1));
              return (
                <React.Fragment key={i}>
                  <span className={cls}>
                    <span>{i + 1}</span>
                    {isAnswered && (
                      <span className="ck-check-badge" aria-label="answered">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                      </span>
                    )}
                  </span>
                  {i < items.length - 1 && (
                    <span className={"ck-phone-stepper-line" + (nextAnswered ? " done" : "")}/>
                  )}
                </React.Fragment>
              );
            })}
          </div>
        </div>
      )}
      {curQ ? (
        <div className="ck-phone-current-q"
             onInput={markAnswered}
             onChange={markAnswered}
             onClickCapture={(e)=>{
               // Only count clicks on interactive answer widgets
               const t = e.target;
               if (t.closest && (
                   t.closest('.ck-phone-passfail') ||
                   t.closest('.ck-phone-photo') ||
                   t.closest('.ck-phone-sig') ||
                   t.closest('.ck-phone-radios')
               )) markAnswered();
             }}>
          <PhoneQuestion q={curQ} qIdx={stepIdx} sIdx={tabIdx} T={T} lang={lang}/>
        </div>
      ) : (
        <div style={{padding:"40px 20px",textAlign:"center",color:"var(--ink-400)",fontSize:12}}>—</div>
      )}
      <div className="ck-phone-step-nav">
        <button className="ck-phone-step-btn prev" onClick={goPrev} disabled={!canPrev}>
          ‹ {T.preview.prev}
        </button>
        <button className={"ck-phone-step-btn " + (isFinal ? "finish" : "next")} onClick={goNext}>
          {isFinal ? ("✓ " + T.preview.finish) : (T.preview.next + " ›")}
        </button>
      </div>
    </>
  );
}

function ConfirmDialog({title,msg,confirmText,onCancel,onConfirm,T,kind}){
  if(!title) return null;
  // v5.0 · kind = 'danger' (default · red · trash icon) or 'primary' (teal · check icon)
  const isPrimary = kind === 'primary';
  return (
    <div className="ck-modal-bg" onClick={onCancel}>
      <div className="ck-confirm" onClick={e=>e.stopPropagation()}>
        <div className={"ck-confirm-ico"+(isPrimary?" primary":"")}>
          {isPrimary ? <IcCheck size={20}/> : <IcTrash size={20}/>}
        </div>
        <h3>{title}</h3>
        <p>{msg}</p>
        <div className="ck-confirm-acts">
          <button className="ck-btn ghost" onClick={onCancel}>{T.btnCancel}</button>
          <button className={"ck-btn "+(isPrimary?"primary":"danger")} onClick={onConfirm}>
            {isPrimary ? <IcCheck size={14}/> : <IcTrash size={14}/>} {confirmText}
          </button>
        </div>
      </div>
    </div>
  );
}

function CkTemplatePicker({T, lang, onClose, onApply, onExportBlank, onExportWith}){
  const templates = window.CK_TEMPLATES || [];
  const [selectedId, setSelectedId] = useState(templates[0]?.id || null);
  const selected = templates.find(t => t.id === selectedId);
  if (!selected) {
    return (
      <div className="ck-modal-bg" onClick={onClose}>
        <div className="ck-modal-lg" onClick={e => e.stopPropagation()}>
          <header className="ck-modal-head">
            <div>
              <div className="ck-modal-title">📋 {T.tpl.title}</div>
              <div className="ck-modal-sub">{T.tpl.sub}</div>
            </div>
            <button className="ck-icon-btn" onClick={onClose}><IcClose/></button>
          </header>
          <div style={{padding:24, color:"var(--ink-500)"}}>No templates available.</div>
        </div>
      </div>
    );
  }
  const totalQ = selected.sections.reduce((a, s) => a + s.questions.length, 0);
  const totalReq = selected.sections.reduce((a, s) => a + s.questions.filter(q => q.required).length, 0);
  const totalPhoto = selected.sections.reduce((a, s) => a + s.questions.filter(q => q.requirePhoto).length, 0);

  return (
    <div className="ck-modal-bg" onClick={onClose}>
      <div className="ck-modal-lg" onClick={e => e.stopPropagation()}>
        <header className="ck-modal-head">
          <div>
            <div className="ck-modal-title">📋 {T.tpl.title}</div>
            <div className="ck-modal-sub">{T.tpl.sub}</div>
          </div>
          <button className="ck-icon-btn" onClick={onClose}><IcClose/></button>
        </header>
        <div className="ck-tpl-body">
          <aside className="ck-tpl-list">
            {templates.map(tpl => (
              <button key={tpl.id} className={"ck-tpl-card " + (tpl.id === selectedId ? "on" : "")} onClick={() => setSelectedId(tpl.id)}>
                <span className="ck-tpl-icon">{tpl.icon}</span>
                <span className="ck-tpl-text">
                  <span className="ck-tpl-name">{lang === "th" ? tpl.nameTh : tpl.nameEn}</span>
                  <span className="ck-tpl-desc">{lang === "th" ? tpl.descTh : tpl.descEn}</span>
                </span>
                {tpl.id === selectedId && <span className="ck-tpl-check"><IcCheck size={12}/></span>}
              </button>
            ))}
          </aside>
          <div className="ck-tpl-preview">
            <div className="ck-tpl-preview-head">
              <div>
                <div className="ck-tpl-preview-eyebrow">{T.tpl.preview}</div>
                <h3 className="ck-tpl-preview-title">{selected.icon} {lang === "th" ? selected.nameTh : selected.nameEn}</h3>
                <p className="ck-tpl-preview-desc">{lang === "th" ? selected.descTh : selected.descEn}</p>
              </div>
            </div>
            <div className="ck-tpl-stats">
              <span className="ck-tpl-stat">📚 {T.tpl.ref}: {selected.refStd}</span>
              <span className="ck-tpl-stat">📂 {selected.sections.length} {T.tpl.sections}</span>
              <span className="ck-tpl-stat">✅ {totalQ} {T.tpl.questions}</span>
              <span className="ck-tpl-stat coral">🔴 {totalReq} {T.tpl.reqLabel}</span>
              <span className="ck-tpl-stat gold">📷 {totalPhoto} {T.tpl.photoLabel}</span>
            </div>
            {selected.sections.map((s, si) => (
              <div key={s.id}>
                <div className="ck-tpl-section-head">
                  <span className="ck-tpl-section-num">{String.fromCharCode(65 + si)}</span>
                  <span>{lang === "th" ? s.nameTh : s.nameEn}</span>
                  <span className="ck-tpl-section-count">{s.questions.length} {T.tpl.questions}</span>
                </div>
                {s.questions.map((q, qi) => {
                  const sevClass = q._sev === "วิกฤต" ? "critical" : q._sev === "สูง" ? "high" : "medium";
                  const sevLabel = q._sev === "วิกฤต" ? T.tpl.sevCritical : q._sev === "สูง" ? T.tpl.sevHigh : T.tpl.sevMedium;
                  return (
                    <div className="ck-tpl-q" key={q.id}>
                      <div className="ck-tpl-q-code">{q._code || "—"}</div>
                      <div className="ck-tpl-q-text">
                        <div className="ck-tpl-q-label">{lang === "th" ? q.labelTh : q.labelEn}</div>
                        <div className="ck-tpl-q-meta">
                          {q._sev && <span className={"sev " + sevClass}>{sevLabel}</span>}
                          {q.required && <span>★ {T.tpl.reqLabel}</span>}
                          {q.requirePhoto && <span>📷 {T.tpl.photoLabel}</span>}
                          {q._code && q.helpTh && <span>{q.helpTh.replace(/^\[[^\]]+\]\s*/, "")}</span>}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            ))}
          </div>
        </div>
        <footer className="ck-modal-foot">
          <button className="ck-btn ghost" onClick={onClose}>{T.tpl.cancel}</button>
          <button className="ck-btn primary" onClick={() => onApply(selected)}><IcCheck size={14}/> {T.tpl.apply}</button>
          <button className="ck-btn outline" onClick={() => onExportBlank(selected)}>📥 {T.tpl.exportBlank}</button>
          <button className="ck-btn outline" onClick={() => onExportWith(selected)}>📊 {T.tpl.exportWithData}</button>
        </footer>
      </div>
    </div>
  );
}

function CkApp(){
  const [lang,setLang]=useState("th");
  const T=window.CK_I18N[lang];
  // Expose setLang to the AppShell topbar (outside React) so the TH/EN flag toggle there can drive language
  React.useEffect(() => { window.__ckSetLang = setLang; }, []);
  const [projectId,setProjectId]=useState(window.CK_PROJECTS[0].id);
  const [allLists,setAllLists]=useState(window.CK_SEED);
  const [activeId,setActiveId]=useState(window.CK_SEED[0].id);
  const [toast,setToast]=useState(null);
  const [confirm,setConfirm]=useState(null);
  const [showPreview,setShowPreview]=useState(false);

  const project=window.CK_PROJECTS.find(p=>p.id===projectId)||window.CK_PROJECTS[0];
  const projectLists=allLists; // v3.0 · show all checklists (project filter removed)
  const active=projectLists.find(c=>c.id===activeId)||projectLists[0]||null;

  const notify=(m)=>{setToast(m);setTimeout(()=>setToast(null),2200)};

  useEffect(()=>{
    if(!projectLists.find(c=>c.id===activeId)){
      setActiveId(projectLists[0]?.id||null);
    }
  },[projectId]);

  const updateActive=(next)=>setAllLists(allLists.map(c=>c.id===next.id?next:c));

  const [showTplPicker, setShowTplPicker] = useState(false);
  const importFileRef = React.useRef(null);

  // Export the currently active checklist as Excel (uses same workbook builder as template export)
  const exportCurrentExcel = () => {
    if (!active) { notify(lang==="th" ? "กรุณาเลือกเช็คลิสต์ก่อน" : "Please select a checklist first"); return; }
    if (!window.XLSX) { notify("Excel library not loaded"); return; }
    const wb = buildChecklistWorkbook(active, true);
    const base = (lang === "th" ? active.nameTh : active.nameEn) || active.id;
    const safe = String(base).replace(/[\\/:*?"<>|]+/g, "-").trim();
    const filename = safe + " " + active.version + ".xlsx";
    window.XLSX.writeFile(wb, filename);
    notify(lang==="th" ? `นำออก Excel เรียบร้อย: ${base}` : `Exported Excel: ${base}`);
  };

  // Trigger hidden file input
  const importExcel = () => importFileRef.current?.click();

  // Read uploaded Excel and create a new checklist from it (stub — parses sheet names + section count)
  const onImportExcelChange = (e) => {
    const f = e.target.files?.[0];
    if (!f) return;
    if (!window.XLSX) { notify("Excel library not loaded"); return; }
    const reader = new FileReader();
    reader.onload = (evt) => {
      try {
        const data = new Uint8Array(evt.target.result);
        const wb = window.XLSX.read(data, {type:"array"});
        // Use sheet names (excluding Cover) as sections; count rows for questions
        const sheetNames = wb.SheetNames.filter(n => !/cover|ปก/i.test(n));
        const rand = () => Math.random().toString(36).slice(2, 8);
        const sections = sheetNames.map((sn) => {
          const sheet = wb.Sheets[sn];
          const rows = window.XLSX.utils.sheet_to_json(sheet, {header:1, defval:""});
          // Skip header row, build questions from non-empty rows
          const dataRows = rows.slice(1).filter(r => r.some(c => String(c).trim() !== ""));
          return {
            id: "s" + rand(),
            nameTh: sn, nameEn: sn,
            descTh: "", descEn: "",
            questions: dataRows.map((r) => ({
              id: "q" + rand(),
              codeRef: String(r[1] || ""),
              textTh: String(r[2] || ""),
              textEn: String(r[2] || ""),
              type: "pass-fail",
              required: false,
              photoRequired: false,
              critical: false,
              standard: String(r[3] || ""),
              level: String(r[4] || "")
            }))
          };
        });
        const id = "ck-imp-" + Date.now();
        const baseName = f.name.replace(/\.(xlsx|xls)$/i, "");
        const fresh = {
          id, projectId, wbsCode: project.wbs[0]?.code || "",
          nameTh: baseName, nameEn: baseName,
          version: "v1.0", status: "draft",
          updatedAt: new Date().toISOString().slice(0,10),
          updatedBy: "Imported",
          assignedRoles: ["qcm","inspector"],
          sections
        };
        setAllLists([fresh, ...allLists]);
        setActiveId(id);
        const qCount = sections.reduce((a,s)=>a+s.questions.length,0);
        notify(lang==="th"
          ? `นำเข้าเรียบร้อย: ${baseName} (${sections.length} หมวด · ${qCount} คำถาม)`
          : `Imported: ${baseName} (${sections.length} sections · ${qCount} questions)`);
      } catch (err) {
        notify(lang==="th" ? "นำเข้าไม่สำเร็จ — ไฟล์อาจไม่ถูกต้อง" : "Import failed — invalid file");
      }
      e.target.value = ""; // reset
    };
    reader.readAsArrayBuffer(f);
  };

  // Build Excel workbook for a checklist template (column spec matches source Excel)
  const buildChecklistWorkbook = (tpl, withData) => {
    const XLSX = window.XLSX;
    const wb = XLSX.utils.book_new();
    const headers = [
      "ลำดับ", "รหัส", "รายการตรวจสอบ", "อ้างอิงมาตรฐาน", "ระดับ",
      "ผู้ตรวจ", "วันที่", "ผลการตรวจ", "หมายเหตุ", "เลข NCR", "รูปถ่าย"
    ];

    // Sheet 1: Cover
    const cover = [
      [`Checklist Template — ${tpl.icon} ${tpl.nameTh}`],
      [tpl.descTh],
      [`มาตรฐานอ้างอิง: ${tpl.refStd}`],
      [],
      ["ข้อมูลโครงการ"],
      ["ชื่อโครงการ", withData ? (project?.name || "") : ""],
      ["เจ้าของโครงการ", ""],
      ["ผู้รับเหมาหลัก", ""],
      ["วิศวกรควบคุมงาน", ""],
      ["QC Inspector", ""],
      ["วันที่ตรวจสอบ", withData ? new Date().toLocaleDateString("th-TH") : ""],
      ["Phase / งวดงาน", ""],
      ["ชั้น / Zone / ตำแหน่ง", ""],
      ["เลขที่รายงาน", ""],
      [],
      ["สารบัญ"],
      ["#", "หมวด", "จำนวนรายการ"]
    ];
    tpl.sections.forEach((s, i) => {
      cover.push([i + 1, s.nameTh, s.questions.length]);
    });
    const total = tpl.sections.reduce((a, s) => a + s.questions.length, 0);
    cover.push(["รวม", "—", total]);
    const wsCover = XLSX.utils.aoa_to_sheet(cover);
    wsCover["!cols"] = [{wch:20}, {wch:50}, {wch:18}];
    XLSX.utils.book_append_sheet(wb, wsCover, "📋 ปกและสารบัญ");

    // Per-section sheets
    tpl.sections.forEach((s, si) => {
      const rows = [];
      // Title row
      rows.push([`Checklist ${tpl.nameTh} — ${tpl.refStd}`]);
      rows.push([]);
      // Header row
      rows.push(headers);
      // Section divider row
      rows.push([`  ${String.fromCharCode(65 + si)} — ${s.nameTh}`]);
      // Question rows
      s.questions.forEach((q, qi) => {
        if (withData) {
          rows.push([
            qi + 1, q._code || "", q.labelTh, q.helpTh ? q.helpTh.replace(/^\[[^\]]+\]\s*อ้างอิง:\s*/, "").split(" · ")[0] : "",
            q._sev || "", "", "", "รอตรวจ", "", "", ""
          ]);
        } else {
          rows.push([qi + 1, "", "", "", "", "", "", "", "", "", ""]);
        }
      });
      const ws = XLSX.utils.aoa_to_sheet(rows);
      ws["!cols"] = [
        {wch:6}, {wch:10}, {wch:60}, {wch:30}, {wch:10},
        {wch:18}, {wch:14}, {wch:14}, {wch:30}, {wch:14}, {wch:14}
      ];
      const sheetName = (tpl.icon + " " + s.nameTh).slice(0, 31).replace(/[:\\\/?*\[\]]/g, "-");
      XLSX.utils.book_append_sheet(wb, ws, sheetName);
    });

    // Summary sheet
    const sumRows = [
      ["สรุปผลการตรวจ — " + tpl.nameTh],
      [],
      ["หมวด", "รายการทั้งหมด", "ผ่าน", "ไม่ผ่าน", "N/A", "รอตรวจ", "% ผ่าน"],
    ];
    tpl.sections.forEach(s => {
      sumRows.push([s.nameTh, s.questions.length, 0, 0, 0, withData ? s.questions.length : 0, withData ? "0%" : "—"]);
    });
    sumRows.push(["รวม", total, 0, 0, 0, withData ? total : 0, withData ? "0%" : "—"]);
    const wsSum = XLSX.utils.aoa_to_sheet(sumRows);
    wsSum["!cols"] = [{wch:30}, {wch:14}, {wch:10}, {wch:10}, {wch:10}, {wch:10}, {wch:10}];
    XLSX.utils.book_append_sheet(wb, wsSum, "📊 สรุปผลการตรวจ");

    return wb;
  };

  const exportTemplateBlank = (tpl) => {
    if (!window.XLSX) { notify("Excel library not loaded"); return; }
    const wb = buildChecklistWorkbook(tpl, false);
    const base = (lang === "th" ? tpl.nameTh : tpl.nameEn) || tpl.id;
    const safe = String(base).replace(/[\\/:*?"<>|]+/g, "-").trim();
    const filename = safe + (lang === "th" ? " (เปล่า).xlsx" : " (blank).xlsx");
    window.XLSX.writeFile(wb, filename);
    notify(T.tpl.exportedBlank(base));
  };

  const exportTemplateWith = (tpl) => {
    if (!window.XLSX) { notify("Excel library not loaded"); return; }
    const wb = buildChecklistWorkbook(tpl, true);
    const base = (lang === "th" ? tpl.nameTh : tpl.nameEn) || tpl.id;
    const safe = String(base).replace(/[\\/:*?"<>|]+/g, "-").trim();
    const filename = safe + (lang === "th" ? " (พร้อมข้อมูล).xlsx" : " (with-data).xlsx");
    window.XLSX.writeFile(wb, filename);
    notify(T.tpl.exportedFilled(base));
  };

  const applyTemplate = (tpl) => {
    const id = "ck-" + Date.now();
    const rand = () => Math.random().toString(36).slice(2, 8);
    const fresh = {
      id, projectId, wbsCode: project.wbs[0]?.code || "",
      nameTh: tpl.nameTh, nameEn: tpl.nameEn,
      version: "v1.0", status: "draft",
      updatedAt: new Date().toISOString().slice(0,10),
      updatedBy: "You",
      assignedRoles: ["qcm","inspector"],
      sections: (tpl.sections || []).map((s, si) => ({
        id: "s" + rand(),
        nameTh: s.nameTh, nameEn: s.nameEn,
        descTh: s.descTh, descEn: s.descEn,
        questions: (s.questions || []).map((q, qi) => ({
          ...q,
          id: "q" + rand()
        }))
      }))
    };
    setAllLists([fresh, ...allLists]);
    setActiveId(id);
    setShowTplPicker(false);
    notify(T.toast.tplApplied(lang === "th" ? tpl.nameTh : tpl.nameEn));
  };

  const newChecklist=()=>{
    const id="ck-"+Date.now();
    const fresh={
      id, projectId, wbsCode:project.wbs[0]?.code||"",
      nameTh: lang==="th"?"Checklist ใหม่":"New Checklist",
      nameEn:"New Checklist", version:"v0.1", status:"draft",
      updatedAt: new Date().toISOString().slice(0,10), updatedBy:"You",
      assignedRoles:["qcm","inspector"],
      sections:[{id:"s"+Date.now(),nameTh:"",nameEn:"",questions:[]}]
    };
    setAllLists([fresh,...allLists]);
    setActiveId(id); notify(T.toast.created);
  };

  const duplicate=()=>{
    if(!active) return;
    const copy={...active,id:"ck-"+Date.now(),
      nameTh:active.nameTh+(lang==="th"?" (สำเนา)":" (Copy)"),
      nameEn:active.nameEn+" (Copy)", status:"draft"};
    setAllLists([copy,...allLists]); setActiveId(copy.id); notify(T.toast.duplicated);
  };

  const doDelete=()=>{
    if(!active) return;
    setAllLists(allLists.filter(c=>c.id!==active.id));
    setActiveId(projectLists.find(c=>c.id!==active.id)?.id||null);
    setConfirm(null); notify(T.toast.deleted);
  };

  const publish=()=>{
    if(!active) return;
    updateActive({...active,status:"published",updatedAt:new Date().toISOString().slice(0,10)});
    notify(T.toast.published);
  };

  return (
    <div className="ck-app">
      <div className="ck-page-head">
        <div className="ck-page-head-flex">
          <div>
            <h1 className="ck-page-title"><span className="emoji">📋</span><span>{T.pageTitle}</span></h1>
            <p className="ck-page-sub">{T.pageSub}</p>
          </div>
          <div className="ck-action-right">
            <button className="ck-btn outline sm" onClick={() => setShowTplPicker(true)}>
              📋 {T.btnTemplate}
            </button>
            <button className="ck-btn outline sm" onClick={importExcel}>
              📥 {T.btnImportXlsx}
            </button>
            <button className="ck-btn outline sm" onClick={exportCurrentExcel} disabled={!active}>
              📤 {T.btnExportXlsx}
            </button>
            <button className="ck-btn primary sm" onClick={newChecklist}>
              ➕ {T.btnNew}
            </button>
            <input
              ref={importFileRef}
              type="file"
              accept=".xlsx,.xls"
              style={{display:"none"}}
              onChange={onImportExcelChange}
            />
          </div>
        </div>
      </div>

      <div className="ck-body">
        <CkSidebar T={T} checklists={projectLists} activeId={active?.id} setActiveId={setActiveId} onNew={newChecklist} onTemplate={() => setShowTplPicker(true)} lang={lang} />
        <main className="ck-main">
          <CkEditor T={T} lang={lang} project={project} checklist={active}
            update={updateActive} onDuplicate={duplicate}
            onDelete={()=>setConfirm({title:T.confirm.delTitle,msg:T.confirm.delMsg,confirmText:T.confirm.delConfirm,onConfirm:doDelete,kind:'danger'})}
            onPublish={publish} onPreview={()=>setShowPreview(true)} notify={notify}
            onSaveConfirm={(mode)=>{
              // v5.0 · confirm before actual save/publish
              if (mode === 'publish') {
                setConfirm({
                  title: T.confirm.publishTitle, msg: T.confirm.publishMsg,
                  confirmText: T.confirm.publishConfirm, kind: 'primary',
                  onConfirm: ()=>{ publish(); setConfirm(null); }
                });
              } else {
                setConfirm({
                  title: T.confirm.saveTitle, msg: T.confirm.saveMsg,
                  confirmText: T.confirm.saveConfirm, kind: 'primary',
                  onConfirm: ()=>{
                    // 'save' mode · already published · update timestamp only
                    if (active) updateActive({...active, updatedAt: new Date().toISOString().slice(0,10)});
                    notify(T.toast.saved || 'บันทึกเรียบร้อย');
                    setConfirm(null);
                  }
                });
              }
            }} />
        </main>
      </div>

      {showTplPicker && <CkTemplatePicker T={T} lang={lang} onClose={() => setShowTplPicker(false)} onApply={applyTemplate} onExportBlank={exportTemplateBlank} onExportWith={exportTemplateWith} />}
      {showPreview && active && <MobilePreview checklist={active} project={project} lang={lang} T={T} onClose={()=>setShowPreview(false)} />}
      <ConfirmDialog T={T} {...(confirm||{})} onCancel={()=>setConfirm(null)} />
      <CkToast msg={toast} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<CkApp />);
</script>
</body>
</html>